含换行文本的<li>标签致父div布局异常？求原因解析

父div设置了width:70%，内部采用Flex布局，包含两个并排子div：左侧div设置width:15%，右侧为无类名div。当右侧div内的<li>标签文本过长换行时，左侧div的实际宽度会小于父div的15%；将width:15%改为min-width:15%即可解决问题，想了解该现象的原因。

代码示例 #

CSS代码 #

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  width: 70%;
  display: flex;
  border-style: solid;
  border-width: 2px;
  border-color: white;
}

.left {
  width: 15%;
}

HTML代码 #

<div class="parent">
  <div class="left">
    Left
  </div>
  <div>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
      <li>"Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</li>
    </ul>
  </div>
</div>

原因分析 #

这是Flex布局的默认收缩规则导致的：

• Flex容器（.parent）的子元素默认带有flex-shrink: 1属性，即当容器内总空间不足时，子元素会自动收缩以适配容器。
• 你给左侧div设置的width:15%仅为初始宽度，并非固定宽度上限。当右侧文本换行时，Flex布局会重新计算空间分配——若右侧内容的最小宽度（比如长单词的宽度）导致容器总空间紧张，左侧div会触发flex-shrink机制收缩，最终实际宽度小于15%。
• 改用min-width:15%后，相当于给左侧div设置了宽度下限，即使容器空间不足，也不会收缩到15%以下，同时仍能根据内容自动扩展（若有需要），从而解决了宽度被压缩的问题。

如果需要让左侧宽度完全固定，也可以设置flex: 0 0 15%（flex-grow:0禁止扩展、flex-shrink:0禁止收缩、flex-basis:15%设置基础宽度），效果与min-width:15%+width:15%类似，但规则更明确。

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