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

可变高度水平手风琴

1 个答案: