子元素如何使用父元素的高度？

Question

<div class="first">
    <div class="second">
      Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi
      以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

      Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS
      应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
    </div>
  </div>

<style>
    .first {
      width: 100px;
      height: 200px;
      background-color: lightblue;
      overflow: auto;
    }

    .second {
      /* width: 100%; */
      height: 100%;
      background-color: lightcoral;
    }
  </style>

希望是second的高度是200px，但是由于second的内容过多，高度大于了200px，怎么设置才能让让second的高度和first保持一致，在不设置具体值的情况下。

Answer 1

你这样写就是已经用了父元素的高度了，不过你没有设置子元素溢出的情况，在父元素加上overflow属性就可以了

Answer 2

试试内层的height: inherit

Answer 3

子元素高度溢出，除非设置overflow为auto或scroll使其可滚动，才能保证高度和父元素一致。