如何用CSS实现容器自适应换行后的文本宽度？

默认情况下，文本换行时容器宽度会变为设置的最大宽度。我希望容器宽度能适配换行后的文本，并且在以下示例中让两个盒子宽度相同，能否不使用JS实现？

原示例代码 #

CSS #

div {
  border: 1px solid red;
  max-width: 100px;
  display: inline-block;
}

HTML #

<div>
qwertyuiop 
</div>
<div>
qwertyuiop qwertyuiop 
</div>

补充说明 #

本问题与flexbox无关，并非重复问题《Make container shrink-to-fit child elements as they wrap》。

解决方案 #

可以实现，无需JavaScript。以下是两种可行方案：

方案一：借助父容器收缩特性 #

通过父容器的inline-block特性让其宽度由子元素的最大宽度决定，再让子元素继承父容器宽度实现同宽：

/* 新增父容器样式 */
.box-group {
  display: inline-block;
}
.box-group div {
  border: 1px solid red;
  max-width: 100px;
  width: 100%;
  display: block;
}

<div class="box-group">
  <div>
    qwertyuiop 
  </div>
  <div>
    qwertyuiop qwertyuiop 
  </div>
</div>

方案二：利用CSS min-content和flex对齐 #

通过min-content让容器宽度适配换行后的文本实际宽度，再用flex父容器让子元素自动对齐宽度：

.box-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.box-group div {
  border: 1px solid red;
  width: min-content;
  max-width: 100px;
}

<div class="box-group">
  <div>
    qwertyuiop 
  </div>
  <div>
    qwertyuiop qwertyuiop 
  </div>
</div>

两种方案都能让两个盒子宽度一致，且容器宽度会适配换行后的文本（不会直接拉满max-width，而是取换行后每行的实际宽度，同时不超过设置的max-width上限）。

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