关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题

关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题

要理解这个问题，首先要搞清楚一个元素的高度是由什么决定的？如果在不额外设置高度或者行高等外加的影响高度的css样式时，一个元素的高度就是其内部元素内容的高度之和。所以元素的高度是由内向外计算的。

那如果

<div class="box">
  <div class="item1">第一行内容</div>
    <div class="item2">第二行内容</div>
    <div class="item3">第三行内容</div>
</div>

这段代码里面，box的高度就是里面三个div高度的和

**那么height设置百分比的高度又是怎么计算的呢？**当给一个元素的高度设置成%，如height:10%，那么他的高度为父元素的高度*10%，所以要给一个元素设置%的高度，他的父元素就必须有一个明确的高度，如果父元素没有确定高度，那么子元素的高度也会无从计算

//html
<div class="box">
        <div class="item1">第一行内容</div>
        <div class="item2">第二行内容</div>
        <div class="item3">第三行内容</div>
        <div class="item4">第四行内容</div>
    </div>
    
 //css
  .box{
            border:1px solid black ;
        }
        .item1{
            background-color: red;
            height: 10%;
        }
        .item2{
            background-color: yellow;
            height: 20%;
        }
        .item3{
            background-color: green;
            height: 30%;
        }
        .item4{
            background-color: blue;
            height: 40%;
        }

可以看到虽然给每个div设置了不一样的百分比高度，但是并没有达到想象中的效果，如果我们给父元素box设置一个高度，效果立马就出来了

 .box{
            border:1px solid black ;
            height: 200px;
        }

当前有一个需求，有下面这样一段html，当屏幕高度大于box内容高度是，wrap的高度等于内容高度，当屏幕高度小于box高度时，box的高度等于屏幕高度；由于一些其他的效果需要，必须要给box设置一个明确的高度，且等于父元素的高度height，不能不设置或者设置max-height等，这里只给出最基本的html结构。

    <div class="wrap">
        <div class="box">
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容<br>
            内容
        </div>
    </div>

一开始看到这个需求，我想很多朋友都会想到给父元素设置max-height等于屏幕高度，子元素设置100%；咋一看或许这样就能满足需求，当内容高度不够时，高度自动撑开，当超过max-height时，高度为max-height的高度，而子元素要想和父元素一样高，给高度设置100%。

 .wrap{
            border: 2px solid black ;
            max-height: calc(100vh - 20px); /* 这里我们剪掉html自带的边距 */
        }
        .box{
            background-color: red;
            height: 100%;
            overflow: hidden;/* 为了方便观察设置超出隐藏 */
        }

在上面的结果中，浏览器出现了滚动条，而且box红色的区域明显超过了wrap的黑色边框，证明我们为子元素设置的高度100%是没有生效的。前面我们说到如果给一个元素设置高度为百分比时，他的高度时父元素的高度乘百分比，而此时我们的父元素只设置了max-height，是没有确定高度的，所以子元素的高度也无法计算，默认由内容撑开了。
那我们要实现我们的需求应该怎么做呢，需要用到flex布局；

	<div class="wrap">
        <div class="content">
            <div class="box">
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容<br>
                内容
            </div>
        </div>
    </div>

  		.wrap{
            border: 2px solid black ;
            max-height: calc(100vh - 20px); /* 这里我们剪掉html自带的边距 */
            display: flex;
        }
        .content{
            flex: 1;
        }
        .box{
            background-color: red;
            height: 100%;
            overflow: hidden;/* 为了方便观察设置超出隐藏 */
        }

我们的效果就实现了