如何让容器溢出后水平展开？

Question

我想创建一个将填充文本的容器。文本应该首先垂直填充容器然后（如果需要）水平扩展：

如图所示——容器的高度是固定的，我不想改变。然后当它开始溢出时，我需要容器水平扩展，但我不知道该怎么做。

我尝试使用的其他东西

width: min-content

但它不会扩展（https://jsfiddle.net/t8dLo51b/81/）。

width: fit-content

但它不会让文本首先垂直填充容器（https://jsfiddle.net/t8dLo51b/83/）。

Answer 1

#a {
  display: flex;

}

p {
  display: flex;
  padding: 10px;
  width: auto;
  border: 1px black solid;
  height: auto;
  word-break: break-word;
}

第一个样式应用于 ID 为

a

的元素。它将此元素设置为使用

display: flex

属性，这意味着它将显示为一个灵活的容器。

第二种样式应用于页面上的所有

p

元素（段落）。它将这些元素设置为使用

display: flex

属性以及其他样式，例如填充、自动宽度、1 像素的纯黑色边框、自动高度和分词，以防止内容溢出元素的宽度。