关于父级元素给定max-height，子级元素高度设置百分比失效的解决方案

一般情况下，我们需要让父级元素自适应子级元素的内容，而且子级元素在达到一定高度以后需要滚动，有两种情况。

1.父级元素有给定高度

父级元素有给定高度的情况下，子级元素只需要给最大高度，设置滚动即可

<div class="father">

        <div class="child"></div>

</div>

.father {

        height: 100px;

        .child {

                max-height:100%;

                overflow:auto

        }

}

2.父级元素没有给定高度，只有最大给定高度

父级元素有给定高度的情况下，只有最大给定高度，子级元素高度设置百分比无效，这时使用flex实现子级元素设置百分比高度

<div class="father">

        <div class="child"></div>

</div>

.father {

        display: flex;

        .child {

                max-height:100%;

                overflow:auto

        }

}

3.实现效果