如何让设置max-width的div紧密包裹其内容？

解决方案 #

给文本容器添加 width: fit-content; 属性，让它的宽度紧密贴合实际文本内容，而非填满父容器的max-width。

修改后的代码 #

CSS #

.parent {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 50px;
  max-width: 140px;
}

.box {
  width: 16px;
  height: 16px;
}

.red {
  background-color: red;
}

.salmon {
  background-color: salmon;
}

.text {
  width: fit-content;
}

HTML #

<div class="parent">
  <div class="text salmon">
    The quick brooooown fox
  </div>
  <div class="box red">
  </div>
</div>

<div class="parent">
  <div class="text salmon">
    The quick brown fox
  </div>
  <div class="box red">
  </div>
</div>

<div class="parent">
  <div class="text salmon">
    The very quick brown fox
  </div>
  <div class="box red">
  </div>
</div>

原理说明 #

fit-content 会让元素宽度自适应为内容的最大行宽，既保证文本过长时自动换行，又能让容器紧密包裹文本内容，彻底消除右侧多余空隙。父容器的 max-width 依然会生效，防止内容过度拉伸超出设定范围。

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