Jquery 可变高度水平手风琴

我不想为客户设计水平手风琴，但我遇到了一些问题

手风琴本身可以工作，但手风琴的高度不正确，因为如果我更改容器的宽度，手风琴内部的内容会被“挤压”

---

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

您可能需要调整高度，并使用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;
  }
}

---

你能更具体地说明你面临的问题吗？试试

.content{white space:nowrap；}

希望如此help@thebrownkid手风琴的高度应为打开单个选项卡时内容的高度。现在，当容器关闭时，其中的文本被压扁，因此增加了容器的高度。文本不应该被压扁，只是消失在另一个标签后面。我正在将高度固定为100px，但您可以根据需要使用它。虽然固定高度不是我想要的，但内容是可变的。但是为了获得一致的体验，您不希望标签的大小（高度）相同吗？是的，我希望标签的高度相同，但是因为我不知道客户将在字段中输入什么内容，所以我不想为手风琴设置特定的高度。@Mathijsvdb我已经更新了我的答案以满足您的要求

.content {
  flex: 1 0 0;
  overflow: hidden;
  max-width: 0px;
  transition: .375s ease-in-out;
  display:none;

  &.active {
    max-width: 100%;
    display: block;
  }
}