两个 div - 一个固定高度，另一个填充剩余空间

Question

我有两个 div：一个具有静态高度，另一个用于填充父级的其余空间。父 div 获得动态高度。在示例中，我将其设置为100px，但它可以是200px或300px。该green部分溢出blue父部分。我添加了边距只是为了显示溢出。我希望它只填充到父边界并且不想要任何滚动条。我不知道如何摆脱这个超出父母范围的 15px。感谢这里的任何帮助。

.container {
  width: 100%;
  height: 100px;
  background: blue;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
  height: 15px;
  width: 100%;
  background: red;
}

.child2 {
  position: absolute;
  top: 15px;
  height: 100%;
  width: 100%;
  margin-left: 5px;
  background: green;
}

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Answer 1

请使用弹性盒

.p {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border: 1px solid red;
}

.c {
  height: 15px;
  background-color: yellow;
}

.d {
  flex-grow: 1;
  background-color: green;
}

<div class='p'>
    <div class=c></div>
    <div class=d>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officia, perferendis sed ipsam quae illo voluptas voluptate, obcaecati pariatuLorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>