1、概念
给元素设置最小高度，当height小于 min-height ，min-height会覆盖height的值
2、案例
如果我有一个盒子A，A设置了min-height的高度为200px；并设置了overflow：auto，那么如果里面的内容超过了200px，他会出现滚动条吗？
答案是：不会，案例如下
<div style="min-height: 200px; width: 200px; background-color: antiquewhite"><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p></div>
原因是什么呢？原因是因为min-height代表的是这个盒子的最小高度，即：如果内容小于盒子高度，则最终高度为盒子高度；如果内容大于盒子高度，那么盒子会被内容撑开变大
那如果解决这种问题呢？
因为如果是这样的话，那么这个盒子其实就是没有高度的，如果该盒子有子元素，那么子元素设置高度的时候，没法继承父元素的高度
3、解决办法
1）在设置min-height的同时，也给该盒子设置高度height
<div style="min-height: 200px;height:200px; width: 200px; background-color: antiquewhite;overflow-y: auto;"><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p></div>
2）我们知道，在flex布局中，交叉轴的长度会自动填满，因此在flex布局中，高度其实是固定的，此时只写min-height时，盒子也是有高度的
<div style="display: flex; height: 300px; width: 300px"><!-- 两个子盒子只设置了宽度，但是交叉轴的高度是填满的 --><div style="width: 100px; background-color: antiquewhite"></div><div style="flex: 1; min-height: 100%; background-color: aqua"><div style="height: 100%; overflow: auto"><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p><p>测试文字</p> <p>测试文字</p> </div></div></div>
