如何自动调整并排元素宽度并优化Flexbox换行以最小化容器高度？

1. 自动调整并排元素宽度以最小化容器总高度 #

要让两个内容长度可变的并排元素自动适配宽度、最小化容器总高度，核心是利用Flexbox的弹性分配机制，让元素根据自身内容需求合理分配空间，同时避免不必要的换行：

• 外层flex容器添加align-items: flex-start，避免子元素被强制拉伸至相同高度
• 给两个子元素设置合适的flex属性，让它们既能根据内容占据宽度，又能在空间不足时合理收缩
• 给列表容器设置min-width: min-content，确保它至少能容纳内部元素不换行的最小宽度，避免无意义换行导致高度增加

2. 让Flexbox仅在换行能减少高度时才换行 #

原示例中列表换行反而增加了容器高度，是因为列表被过度压缩，导致内部列表项被迫换行。要解决这个问题，需要让列表优先保持足够宽度容纳内部元素，只有当容器剩余空间不足以维持这个最小宽度时，才允许内部换行：

修改后的完整代码 #

div {
  border: 1px solid blue;
  display: flex;
  width: 320px;
  align-items: flex-start; /* 避免元素被强制拉伸 */
  gap: 10px; /* 可选：添加元素间距，优化布局观感 */
}

p {
  flex: 1 1 auto; /* 允许文本块根据内容扩展，空间不足时自动收缩换行 */
  margin: 0; /* 移除默认margin，避免额外高度 */
}

ul {
  flex: 0 1 min-content; /* 不主动抢占空间，必要时可收缩，但最小宽度为内部元素不换行的宽度 */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid red;
  list-style-type: none;
  padding: 10px;
}

<div>
  <p>This is a short text. Maybe one or two lines. Or maybe a little more.</p>
  <ul>
    <li>gugu</li>
    <li>gaga</li>
  </ul>
</div>

逻辑说明 #

• 外层容器的align-items: flex-start：让子元素顶部对齐，避免被强制拉伸到相同高度，减少不必要的容器高度
• 文本块的flex: 1 1 auto：当有剩余空间时，文本块会自动扩展占据空间；当空间不足时，文本块会收缩换行，优先保证列表能获取最小宽度
• 列表容器的flex: 0 1 min-content：列表不会主动抢占空间，但可以在必要时收缩；min-content确保它至少能容纳两个列表项并排的宽度，避免无意义换行。只有当容器宽度不足以同时容纳文本块内容和列表的最小宽度时，列表才会收缩，内部列表项换行——此时换行能有效避免容器宽度溢出，同时不会额外增加总高度

效果验证 #

• 文本较短时：列表保持最小宽度，列表项并排显示，容器高度由内容最高的元素决定，达到最小化
• 文本过长时：文本块先收缩换行，若仍无法容纳，列表才会收缩、内部列表项换行，此时换行能避免容器宽度溢出，同时总高度不会因文本过度换行而大幅增加

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