如何设置CSS以仅从两个孩子中的一个增长父高？

Question

我想让父母（橙色边框）只增长到第一个孩子的大小（灰色背景），让第二个孩子垂直溢出。

这就是我所拥有的：

这就是我想要的：

Codepen：https://codepen.io/gbucher/pen/wPGBpN

HTML：

<div class='parent'>
  <div class='child1'>
  </div>
  <div class='child2'>
    <div class='elem'>
      A
    </div>
    <div class='elem'>
      B
    </div>
    <div class='elem'>
      C
    </div>
    <div class='elem'>
      D
    </div>
    <div class='elem'>
      E
    </div>
  </div>
</div>

CSS：

.parent {
  border: 2px solid orange;
  display: flex;
  /* How to make it work without a fixed
     height ?
  height:60px;
  */
}

.child1 {
  height: 60px;
  width: 300px;
  background: #888;
}
.child2 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.elem {
  border: 1px solid black;
  margin-top: -1px;
  padding: 3px;
  width: 10rem;
}

Answer 1

在计算父级的大小时，会忽略绝对定位的子级。

因此解决方案是在第二个孩子周围使用滚动包装器。包装器应该有position: relative，滚动子应该有position: absolute。

.parent {
  border: 2px solid orange;
  display: flex;
}

.child1 {
  height: 70px;
  flex-grow: 1;
  background: #888;
}

.child2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  background: orange;
}

.scroll {
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 323px;
  background: green;
}

.elem {
  border: 1px solid black;
  margin-top: -1px;
  padding: 3px;
  width: 300px;
}

<div class='parent'>
  <div class='child1'>
    one
  </div>
  <div class='scroll'>
    <div class='child2'>
      <div class='elem'>
        A
      </div>
      <div class='elem'>
        B
      </div>
      <div class='elem'>
        C
      </div>
      <div class='elem'>
        D
      </div>
      <div class='elem'>
        E
      </div>
    </div>
  </div>
</div>