当文本内部溢出到右边时CSS增加容器宽度？

Question

什么时候做的事情：

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

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

如果文本足够大，则会导致相应的文本向右溢出容器宽度。如果你想要一个水平布局，这很棒，但是，div宽度不会增长，因为文本已经“溢出”了容器。如果你将背景放到div中，你会看到在屏幕结束后背景不会出现（如果文字足够大）。这就是为什么，如果你以横向方式在第二个div旁边放置第二个div，第二个div将超过第一个div的溢出内容，这是不可取的。

问题是：我怎样才能将第一个div调整到他内部的内容，无论它在水平线上有多大？

Answer 1

我可能会这样做（如果我理解你想要的）

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

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

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

Answer 2

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

注意 - IE不支持。检查一下：https://caniuse.com/#search=max-content