Flexbox场景下如何让可折叠元素展开与折叠状态宽度保持一致

问题原因 #

Flex容器的默认宽度计算逻辑会根据子元素的实时内容宽度调整尺寸，<details>元素折叠时仅渲染<summary>内容，宽度由较短的summary内容决定；展开后内部完整内容宽度更大，就会撑大外层flex子项的宽度。

非固定宽度解决方案 #

方案1：设置最小宽度为内容最大宽度（最简单） #

给<details>元素添加以下CSS即可：

details {
  min-width: max-content;
  /* 如果需要限制最大宽度不超过父容器，替换为下面这行 */
  /* min-width: min(max-content, 100%); */
}

这个方案会让<details>的最小宽度始终等于其内部所有内容的最大宽度，折叠时不会因为仅显示summary而缩小宽度，完全不需要手动设置固定数值。

方案2：用grid包裹容器实现（兼容场景更全） #

如果需要适配<details>内部有动态加载内容的场景，可以在外层加一个空的包裹容器，用grid布局预占最大宽度：

<div class="details-wrapper">
  <details>
    <summary>折叠标题</summary>
    <div>折叠的内容内容内容...</div>
  </details>
</div>

对应的CSS：

.details-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

这个方案里包裹容器会自动取<details>展开状态的最大宽度作为自身宽度，不管<details>是折叠还是展开状态，外层宽度都不会变化。

特殊场景适配 #

如果<details>的外层flex子项设置了flex-grow需要占满剩余宽度，直接给<details>加width: 100%即可，flex子项的宽度不会再随<details>的折叠展开变化。

内容的提问来源于stack exchange，提问作者jramm