可变高度水平手风琴

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;
  }
}