2
我试图使中央面板成为嵌套柔性盒内的可滚动区域（x和y）。嵌套柔性盒中的溢出-x
html,
body {
width: 100%;
height: 100%;
margin: 0;
color: #fff;
}
.layout {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
width: 100%;
}
.layout.horizontal {
flex-direction: row;
}
.layout.vertical {
flex-direction: column;
}
.pane {
position: relative;
flex: 1;
}
.fill {
min-height: 100%;
height: 100%;
}
.scrollable {
overflow-x: auto;
overflow-y: auto;
}
.content {
background-color: salmon;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
}
/* Colour Highlighting */
.layer1 > .pane:nth-child(1) {
background-color: steelblue;
}
.layer1 > .pane:nth-child(2) {
background-color: plum;
}
.layer1 > .pane:nth-child(3) {
background-color: lightsteelblue;
}
.layer2 > .pane:nth-child(1) {
background-color: darkseagreen;
}
.layer2 > .pane:nth-child(2) {
background-color: seagreen;
}
.layer2 > .pane:nth-child(3) {
background-color: lightseagreen;
}<div class="layout horizontal fill layer1">
<div class="pane">
LEFT
</div>
<div class="pane">
<div class="layout vertical fill layer2">
<div class="pane">
TOP
</div>
<div class="pane scrollable">
<div class="content">CONTENT</div>
</div>
<div class="pane">
BOTTOM
</div>
</div>
</div>
<div class="pane">
RIGHT
</div>
</div>注：展开样品到全窗口模式。
在非嵌套场景水平滚动为中央面板正常工作：如预期
然而嵌套时，对于中央面板中的水平滚动不激活。 Chrome，Firefox和Edge似乎就是这种情况。有趣的是，它在IE11中的预期效果，这表明现代浏览器正确地解释了我未知的某些规范。
我错过了什么？
更新：似乎设置溢出：自动在外部中央列是必需的。有了它，它的行为如预期。为什么是这样？
那么你期望什么？ ....正如我所看到的，它按预期工作。 – LGSon
我期望中央面板能够以可视区域小于红色内容框的方式进行水平滚动和垂直滚动。它与非嵌套示例中的方式相同。 –
你是对的：它是在规范中定义的行为。默认情况下，Flex项目不能小于其内容。 –