【发布时间】：2016-02-11 21:36:28
【问题描述】：
我一直都在使用 flexbox，但由于某种原因，这让我有好几天摸不着头脑。
我正在寻找的是青色区域，可在 XY 方向滚动 (.scrollable)，周围有洋红色 (.tab-content) 填充。
似乎将它们放在一起的最低项目是蓝色 (.panels) div，它知道它应该是窗口宽度和 200 像素高。然后 flex 子 .body 就从屏幕上长出来了。
问题似乎在于 .body 无法确定父 .panels 的宽度。我从来没有遇到过这样的问题，我很确定它围绕着无法将文本包装在青色表中，但我必须将它们作为单独的行。
* {
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>在这里编写代码： http://codepen.io/anon/pen/BjvWzR
【问题讨论】：
-
将父容器上的溢出设置为滚动或自动或隐藏。
-
@Blunderfest 使洋红色区域可垂直滚动，并且不影响它从屏幕一侧生长
-
您需要为每个容器指定溢出，如果我只是在您的 .panels 类上放置溢出隐藏，所有溢出都会被剪裁。把它放在下层的每一层上是一个不错的选择。
-
你的 html 结构对我来说很难阅读。但这就像你需要的东西：codepen.io/anon/pen/dGwWMR
-
@Blunderfest 同样，您滚动的是洋红色区域而不是青色区域