1
我一直都在使用flexbox，但由於某些原因，這讓我撓了腦袋幾天。Flexbox兒童在其父母之外成長
我在尋找的是青色區域是XY可滾動（.scrollable），洋紅色（.tab內容）填充它。
似乎把它放在一起的最低項是藍色（.panels）div，它知道它應該是窗口寬度和200px高。然後flex兒童體就從屏幕上長出來。
看來問題在於，.body無法弄清楚父級.panel是多寬。我從來沒有像這樣的問題，我敢肯定它圍繞不能將文本包裝在青色表格中，但我必須將其作爲單獨的行。
的Chrome 48（版本授權）： 
* {
box-sizing: border-box;
}
.detail {} .panels {
background-color: blue;
display: flex;
max-height: 200px;
}
.header {
background-color: red;
margin-right: 1rem;
flex-shrink: 0;
}
.body {
background-color: green;
display: flex;
flex-direction: column;
flex: 1;
}
.tabs {
flex-shrink: 0;
}
.tab-content {
flex: 1;
background-color: magenta;
padding: 1rem;
}
.scrollable {
overflow: auto;
background-color: cyan;
}
.formatted-text {
white-space: pre;
}<div class="detail">
<div class="panels">
<div class="header">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
</table>
</div>
<div class="body">
<div class="tabs">Tabs</div>
<div class="tab-content">
<div class="scrollable">
<table>
<tbody>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
<tr>
<td>01</td>
<td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Codepen這裏： http://codepen.io/anon/pen/BjvWzR
設置父容器上的溢出滾動或自動或隱藏。 – Blunderfest
@Bunderunderst讓品紅色區域可以垂直滾動，並且不會影響它從屏幕邊上長出來 – Mike
如果我只是在你的.panels類中放置了overflow-hidden，你需要爲每個容器指定溢出，所有的溢出都被剪切掉。把它放在每一層的路上是一個很好的選擇。 – Blunderfest