當父 Div 超過 X 高度時，使底部 Div 可滾動

Question

我試圖有一個固定高度為 350px 的容器 div。在那個 div 里面，有 2 個子 Div，兩者的高度都是可變的。

我現在的目標是，如果 2 個子 div 加在一起大於父 div，則底部子 div 將獲得一個滾動條。

現在的問題是，無論我嘗試什么，父 div 都會擴展 350 像素的最大高度。

這就是我現在的方式：

<div id="parent-left">
  <div id="top">
    Top-Content<br>
    Top-Content<br>
    Top-Content<br>
    Top-Content<br>
    Top-Content<br>
    Top-Content
  </div>
  <div id="bottom">
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
  </div>
</div>
<div id="parent-right">
  Other Div with actual height of 350px
</div>

#parent-left {
  height: 350px;
  background: red;
  width: 50%;
  float: left;
}

#parent-right {
  height: 350px;
  background: red;
  width: 50%;
  float: right;
}

#top {
    background:#5ae;
}

#bottom {
  background:#ea5;
  height:100%;
  overflow-y: auto;
}

http://jsfiddle.net/Lps0t2ze/

如您所見，Red Div（實際 350px 高度）不是相同的高度，因為 parent-left div 更大。

當我自己定義高度時，我知道這是可能的（例如： http : //jsfiddle.net/by96zof3/ ），但這會殺死 div 的可變高度。

所以我想要的是 #parent-left div 不超過 350px，但我也不必在里面定義任何高度。

我可以使用 JS（和 JQuery），但如果可能的話，我更喜歡沒有它的解決方案。

有人有一些想法嗎？

Answer 1

flex是你的朋友，我的朋友。

#parent-left {
  height: 350px;
  background: red;
  width: 50%;
  float: left;
  display: flex;
  flex-direction: column;
}