<li> 带有换行文本的标签导致其父 div 宽度扩大？

Question

希望澄清为什么会发生这种情况。

我有一个父 div 设置为

width:70%

在父 div 内，我还有两个并排的 div。左侧 div 有

width:15%

，而右侧 div 没有类。正如我所料，左侧 div 是父级 div 宽度的 15%。

但是，当我添加包含大量文本的

<li>

标签时，文本会换行到下一行，左侧 div 的宽度似乎会缩小。它比父 div 的宽度窄 15%。

将

width: 15%

更改为

min-width: 15%

可以解决该问题，但我想知道原因。

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  /* Change my color to yellow */
  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%;
}

<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>

https://playcode.io/1647378

Answer 1

问题在于左边的内容

<style>

    body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  /* Change my color to yellow */
  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%;
}

.list {
    width: 85%;
} 
</style>
<div class="parent">
    <div class="left">
      Left
    </div>
    <div class="list">
      <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>

。由于列表 div 没有指定宽度，因此它会占用所有可用空间，忽略 left 的 width 属性。