当内部文本向右溢出时，CSS会增加容器宽度？答案

【问题标题】：CSS increase container width when text inside overflows to the right?当内部文本向右溢出时，CSS会增加容器宽度？
【发布时间】：2017-07-31 03:09:32
【问题描述】：

当你做类似的事情时：

.container {
  column-width: 200px;
  height: 300px;
}

<div class="container">
  ... a lot of text...
</div>

如果文本足够大，会导致对应的文本向右溢出容器宽度。如果您想要一个水平布局，那就太棒了，但是，div 宽度不会增加，因为文本“溢出”了容器。如果您将背景添加到 div，您将看到在屏幕结束后背景将不存在（如果文本足够大）。这就是为什么，如果你将第二个 div 以水平方式放在这个 div 旁边，第二个 div 将覆盖第一个 div 的溢出内容，这是不可取的。

问题是：我怎样才能让第一个div无论在水平线上有多大，都可以调整到他里面的内容？

【问题讨论】：

标签： html css layout horizontal-scrolling column-width

【解决方案1】：

使用CSS3 Intrinsic Sizing,，您可以使用：width: max-content，它根据包含的文本扩展父容器的宽度。

注意 - 在 IE 中不支持。检查这个：https://caniuse.com/#search=max-content

【讨论】：

不错，不知道有这个选项！

【解决方案2】：

我可能会这样做（如果我明白你想要什么）

.container {
  width: auto;
  height: 300px;
}

.text{
Padding-left: 10%;
Padding-right: 10%;
}
<div class="container">
 <div class="text">
 ... a lot of text...
</div>
</div

容器现在应该根据文本改变大小。 :)

【讨论】：

您没有考虑column-width: 200px 属性的情况。在这种情况下，容器的宽度不会超过屏幕宽度。似乎当文本超出其容器大小时，它会脱离 DOM。