如何让flex column容器仅由第二个子元素决定最大宽度？

要实现让第二个子元素决定flex容器的宽度，第一个子元素自适应该宽度，只需对现有代码做以下修改：

修改后的完整代码 #

<div class="container">
  <div class="first">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div class="second">
    <ul>
      <li>First item (with some information)</li>
      <li>Second item (with some information)</li>
      <li>Third item</li>
    </ul>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.first {
  width: 0;
  min-width: 100%;
  word-wrap: break-word;
}

原理说明 #

• width: 0：强制第一个子元素收缩到最小宽度，避免其内容撑开容器，让容器宽度完全由第二个子元素的内容决定。
• min-width: 100%：确保第一个子元素的宽度至少等于容器（即第二个子元素的宽度），实现自适应容器宽度的效果。
• word-wrap: break-word：让第一个子元素的长文本在容器宽度内自动换行，防止内容溢出。
• align-items: flex-start：让子元素保持自身内容宽度，避免默认的stretch属性干扰宽度逻辑，显式设置更清晰。

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