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