Html 如何使flex子级在增长时溢出其父级？

我有一个flexbox和一个flex孩子：

<div class="flex-parent">
  <div class="flex-child">
    lots of content...
  </div>
</div>

flex子级的内容太多，应该超出其父级的大小。相反，它的高度保持在父级250px的高度

我如何修复此问题并使.flex儿童与其内容一起成长？我可以通过切换到display:block轻松地修复它，但我的实际布局要复杂得多，这使得它变得不切实际

问题是： 工作原理：

将容器切换到flex-direction:column

此解决方案使用来实现布局

默认情况下，弹性项不能小于其内容的大小

在行方向上，弹性项的初始设置为“最小宽度：自动”。但这对你没有帮助，因为你在寻找垂直的，而不是水平的扩展

在列方向上，初始设置为“最小高度：自动”。这确实对你有帮助。它确保弹性项永远不会小于内容的高度

此处的更多详细信息：

将容器切换到flex-direction:column

此解决方案使用来实现布局

默认情况下，弹性项不能小于其内容的大小

在行方向上，弹性项的初始设置为“最小宽度：自动”。但这对你没有帮助，因为你在寻找垂直的，而不是水平的扩展

在列方向上，初始设置为“最小高度：自动”。这确实对你有帮助。它确保弹性项永远不会小于内容的高度

这里有更多详细信息：

除非用于垂直/水平对齐，否则在只有一个子项的盒子上使用flex可能是无用的

要允许柔性子对象增长，请将鼠标悬停在设定的高度上，然后将柔性方向重置为“列”：

有关flex项目大小调整算法的详细信息，请参见B的答案

.灵活父母{ 显示器：flex； 高度：200px； 柔性流动：柱； 边框：实心； } .灵活儿童{ 背景：矢车菊蓝； } 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容 耳鼻喉科内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容控制 耳鼻喉科内容 内容内容内容内容内容内容 那我呢？

除非用于垂直/水平对齐，否则在只有一个孩子的盒子上使用flex可能是无用的

要允许柔性子对象增长，请将鼠标悬停在设定的高度上，然后将柔性方向重置为“列”：

有关flex项目大小调整算法的详细信息，请参见B的答案

.灵活父母{ 显示器：flex； 高度：200px； 柔性流动：柱； 边框：实心； } .灵活儿童{ 背景：矢车菊蓝； } 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容 所容纳之物 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容

---

那我呢？

min height:250px-同样，这与flexbox无关。我在哪里使用了min height？我是说你应该使用min height而不是height。也许我有点误解，但不清楚您可能要解决什么布局问题。谢谢，但是。flex parent需要保持相同的大小。我想让.flex儿童成长。不知何故，让内容以设定的高度比家长长得更高是没有意义的，因为它将悬停在后面的任何内容上。这样做的目的是什么？隐藏什么？最小高度：250px-同样，这与flexbox无关。我在哪里使用了最小高度？我是说你应该使用最小高度而不是高度。也许我有点误解，但不清楚您可能要解决什么布局问题。谢谢，但是。flex parent需要保持相同的大小。我想让.flex儿童成长。不知何故，让内容以设定的高度比家长长得更高是没有意义的，因为它将悬停在后面的任何内容上。这样做的目的是什么？藏点什么？谢谢李

---

与算法的解释相关。我希望我能接受这两个答案！感谢您链接到算法的解释。我希望我能接受这两个答案！

.flex-parent {
  height: 250px;
}