问题描述
嵌套的 flex 容器，子 flex 的高度会超过父容器高度, 并导致父容器高度变大。
推荐的解决方案
- 设置
min-height: 0, 而不是设置height: 0 - 设置
overflow: visible(只要不是auto就行)
原因也并不是由于子元素 flex:1 撑开了父容器, 而是父容器本身 min-height 的计算值导致了其高度计算出现问题, 使子元素 overflow 失效了
原因分析
为什么会content list的高度会撑开其父容器?
原因: flex主轴上的min-height/width是auto。普通的元素是0px mdn
the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.
翻译翻译
非滚动容器的 flex item 上主轴自动最小尺寸的使用值是基于内容的最小尺寸；对于滚动容器，像往常一样，自动最小尺寸为零。
In particular, if flex sizing is being used for a major content area of a document, it is better to set an explicit font-relative minimum width such as min-width: 12em. A content-based minimum width could result in a large table or large image stretching the size of the entire content area into an overflow zone, and thereby making lines of text gratuitously long and hard to read.Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)
翻译翻译
特别是，如果 flex sizing 用于文档的主要内容区域，最好设置一个明确的字体相对最小宽度，例如 min-width: 12em。基于内容的最小宽度可能会导致大表格或大图像将整个内容区域的大小拉伸到溢出区域，从而使文本行无缘无故地长且难以阅读。另请注意，当基于内容的大小调整为用于具有大量内容的项目，布局引擎必须遍历所有这些内容才能找到其最小大小，而如果作者设置了明确的最小值，则没有必要。（然而，对于内容较少的项目，这种遍历是微不足道的，因此不是性能问题。）
关于min-height: auto的计算 : mdn
For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.
翻译翻译
对于 min-width/min-height，指定自动最小尺寸。但是，除非相关布局模块另有定义，否则它会解析为使用的值 0。
简而言之就是，默认解析为0，除非当前布局容器另有计算规则
由于 flex 容器主轴上的min-height/width用的是content-base minimun size
In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion. However, if the box has an aspect ratio and no specified size, its content-based minimum size is the smaller of its content size suggestion and its transferred size suggestion. If the box has neither a specified size suggestion nor an aspect ratio, its content-based minimum size is the content size suggestion.
翻译翻译
通常，弹性项目的基于内容的最小尺寸是其内容尺寸建议和其指定尺寸建议中的较小者。但是，如果框具有纵横比且没有指定大小，则其基于内容的最小大小为其内容大小建议和传输大小建议中的较小者。如果框既没有指定的尺寸建议也没有纵横比，则其基于内容的最小尺寸是内容尺寸建议。
即 content-base minimun size 通常情况下是 content size 和用户设值之间的最小值, 如果有长宽比例限制再另做计算
具体分析
因为content list的高度已经溢出了，对于content而言，由于flex主轴的min-height: auto , 所以content看起来被其子容器给撑开了。此时由于content list的高度与其本身渲染所需高度一致，所以并不会触发overflow: auto的滚动条渲染。
Height: 0为什么会生效
上面已经提到在 flex item 中 min-height: auto 会被解析成 content-based minimum size
如果设置了 height: 0 那么就永远是 height: 0了 , 因为 content-size的计算值不可能比0小, 此时如果配合上 flex: 1 ，就会使得该元素的 computed size 符合预期了
猜想生效顺序是 height: 0 -> minHeight: 0 -> flex: 1
最终渲染的结果是 flex: 1 的计算值，由于 flex: 1 的计算值是小于 content 的高度的，所以此时会触发 content list 的 overflow ，并且也不会使 content 的高度变大。
换而言之,盒模型的底层在没有高度的时候是用 min-height 撑起来的