CSS溢出：具有底部绝对位置的相对高度

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

我的情况如下：

HTML

如您所见，我希望child2在需要时溢出父div。但是，由于我不知道孩子2的确切高度（因为孩子1可能会有一点变化），我无法像我习惯于使用

底部：0px

和

顶部：？？？px

那样进行一些绝对定位

要使用的一些JSFIDLE：

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

---

谢谢

在父级而不是子级上设置溢出（已更新）

CSS

---

使用

display:flex

的解决方案。检查

#父级{
显示器：flex；
位置：绝对位置；
身高：50%；
宽度：100px；
边框：1px纯红；
背景色：红色；
弯曲方向：立柱；
}
#孩子1{
高度：50px；
背景颜色：黄色；
}
#孩子2{
弹性：1；
背景颜色：绿色；
溢出：自动；
}

子2内容子2内容子2内容子2内容子2内容子2内容子2内容子2内容子2内容子2内容子2内容子2内容子2内容子2内容

Flexbox在IE9及更低版本中不起作用。不适合生产。很好！我现在要学习更多关于flex的知识，看起来非常有用。谢谢你，普加什。@JoostS该死的IE。。。自95年以来一直是异常的来源！sighDisplay表格是flexbox的跨浏览器替代品。

<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>

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

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

#parent {
 position: absolute;
 height: 100%; 
 width: 100px; 
 overflow: auto; 
} 
#child1 { } 
#child2 { }