如何防止Flex列容器因子元素内容变化改变宽度

问题核心是column wrap布局的Flex容器会自动跟随当前最宽子元素调整自身宽度。要固定容器宽度并让长文本换行，只需两步调整：

1. 给容器设置width: fit-content，让它的宽度匹配初始状态下最宽的子元素（也就是"Some more content"那一项的宽度），切换内容后容器宽度就不会被长文本撑大
2. 给容器内的文本元素设置换行规则，同时让子元素占满容器宽度，确保长文本自动折行

修改后的CSS代码 #

main{
  display: flex;
}

.container {
  display: flex;
  flex-flow: column wrap;
  border: 1px solid red;
  width: fit-content; /* 关键：锁定容器宽度为初始最宽子元素的宽度 */
 }
  
.child {
  width: 100%; /* 子元素占满容器宽度 */
}

.child p {
  overflow-wrap: break-word; /* 长文本自动换行 */
  margin: 0; /* 可选：移除默认margin避免额外空间 */
}

.hidden {
  display: none;
}

完整可运行代码 #

<p> I don't want that red box to change size when I press the button. I want the text to be on two different lines</p>
<button id="toggleButton">Switch</button>
<main>
  <div class='container'>
    <div class='child first'>
    <p>Some content</p>
    </div>
    <div class='child second'>
    <p>Some more content</p>
    </div>
    <div class='child third'>
    <p>A short text</p>
    </div>
    <div class='child third hidden'>
    <p>A very much more longer text</p>
    </div>
  </div>
</main>

<script>
var thirdDivs = [...document.querySelectorAll('.child.third')];
document.getElementById('toggleButton').addEventListener('click', function() {
  thirdDivs.map((thirdDiv) => {thirdDiv.classList.toggle('hidden');});
});
</script>

补充说明 #

之前调整flex-grow和flex-shrink没用，是因为这两个属性控制的是Flex容器主轴方向的空间分配——你的容器用了column布局，主轴是垂直方向，所以这两个属性只会影响子元素的高度分配，和水平宽度完全无关。

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