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>