具有可折叠元素的 Flexbox - 防止宽度变化答案

【问题标题】：Flexbox with collapsible elements - prevent width changes具有可折叠元素的 Flexbox - 防止宽度变化
【发布时间】：2021-10-10 04:37:03
【问题描述】：

我在 flexbox 中使用了显示元素 ( 和 ) 以及另一个元素。无论如何我可以强制折叠元素（即）占用与展开元素相同的宽度吗？目前，当我展开细节时，宽度会增加，然后当我再次折叠它时会减小：

这张图片显示了两个元素周围的弹性框：

我本质上希望折叠后的宽度等于展开后的宽度，最好不要设置任何固定宽度......

【问题讨论】：

如果你分享代码sn-p，这将非常有帮助。谢谢

标签： html css flexbox width

【解决方案1】：

我个人觉得最好的方法是在手风琴的容器上设置一个宽度。但是，由于您不想明确设置宽度，因此您可以这样做。

不要使用display: none 隐藏您的可折叠项目，而是使用visibility: hidden。这将使元素不可见，您将无法与其交互，但它将保留渲染所需的宽度，因为元素仍然存在。要摆脱垂直空间，请设置height: 0。

我已经创建了一个 sn-p 供您查看：

function  toggle(el) {
  el.children[0].classList.toggle('hide')
}

* {
  font-family: sans-serif;
}

.main {
  background: steelblue;
  display: flex;
  width: 100%;
}

.sidepanel {
  background: crimson;
  display: flex;
  min-height: 100vh;
  color: white;
  padding: 20px 10px;
}

.container {
  display: flex;
}

.hide {
  visibility: hidden;
  height: 0;
}

<div class="container">
  <div class="sidepanel">
  <ul onclick="toggle(this)"> Click Me!
  <div class="hide">
  <li>Data</li>
  <li>Data</li>
  <li>Data that has some words</li>
  </div>
  </ul>
    
  </div>
  <div class="main"></div>
</div>

但这种方法存在问题。如果您没有在左侧面板上设置宽度，如果菜单项不换行它们的文本，它可能会占用太多空间。文本的换行意味着有某种定义的宽度，所以......

【讨论】：