可变高度水平手风琴

Question

我没有试图为客户构建水平手风琴设计， 但我遇到了一些问题.

手风琴本身可以工作， 但是手风琴的高度不正确，因为如果我改变容器的宽度，它里面的内容会被"挤压".

https://codepen.io/thieukevdb/pen/JajVWW

.content {
flex: 1 0 0;
overflow: hidden;
max-width: 0px;
transition: .375s ease-in-out;
&.active {
max-width: 100%;
}
}

这里有人可以帮助我解决问题吗？

Answer 1

你可能想要固定高度，并使用overflow-y：hidden

.content {
flex: 1 0 0;
height: 100px;
overflow-y: hidden ;
max-width: 0px;
transition: .375s ease-in-out;
&.active {
max-width: 100%;
}
}

如果有帮助，请告诉我。

编辑：如果您不想对高度进行硬编码，则可以将内容隐藏在选项卡后面，并在使用代码激活时使其可见，如下所示：

.content {
flex: 1 0 0;
overflow: hidden;
max-width: 0px;
transition: .375s ease-in-out;
display:none;
&.active {
max-width: 100%;
display: block;
}
}