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項目不能小於其內容。 –