CSS 溢出 : relative height with bottom absolute positionning

Question

是的，关于 css 的另一个恼人的溢出问题...

这是我的案例:

HTML

<div id="parent">
  <div id="child1">
    Some short content that may take a line or two.
  </div>
  <div id="child2">
    Some short to very long content that may overflow parent div...
  </div>
<div>

CSS

#parent {
  position: absolute;
  height: 100%;
  width: 100px;
}

#child1 {
}
#child2 {
  overflow: auto;
}

如您所见，我希望 child2 在需要时溢出父 div。但是因为我不知道 child2 的确切高度(因为 child1 可能会有所不同)我无法像我习惯的那样使用 bottom: 0px 和 顶部:???px。

一些 JSFiddle 可以玩:https://jsfiddle.net/6r3ojecL/1/

在最坏的情况下，我会使用一些丑陋的 JS 代码片段，但如果我能再次掌握 css，我会很高兴。 :)

谢谢!

Answer 1

使用 display: flex 的解决方案。检查updated fiddle

#parent {
  display: flex;
  position: absolute;
  height: 50%;
  width: 100px;
  border: 1px solid red;
  background-color: red;
  flex-direction: column;
}
#child1 {
  height: 50px;
  background-color: yellow;
}
#child2 {
  flex: 1;
  background-color: green;
  overflow: auto;
}

<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content
  </div>
</div>