Question

Flexbox可用于垂直对齐元素。但是当一个垂直对齐的元素后来增长时，它可以逃脱其flexbox容器的边界。即使在元素上使用overflow:auto，也会发生这种情况。

这是一个包含一些预期和实际结果的演示。

使用演示：

预期结果：

当输入文本时，段落会变得更高。当段落与其flexbox容器一样高时，它会停止生长并显示垂直滚动条。

实际结果：

当输入文本时，段落会变得更高，但永远不会停止增长。它最终逃脱了其flexbox容器的界限。永远不会显示滚动条。

其他说明：

很有可能将overflow:auto放在容器上，但这并不像预期的那样工作。试试看。输入大量文本，然后向上滚动。请注意，顶部填充消失了，缺少文本行。

Answer 1

您需要执行以下操作：

在<p>元素上添加“max-height：100％”，以防止其无限增长。
如果您希望将padding保留在<p>上，还需要设置box-sizing: border-box以将其填充包含在max-height中{1}}。

（技术上box-sizing:padding-box是您想要的，但Chrome不支持;因此，border-box会这样做，因为它与填充框相同，因为没有边框。）

Answer 2

在css中，您需要提供height

p {
    padding: 20px;
    width: 100%;
    background-color: #ccc;
    outline: none;
    height: 60px;

}