gpt4 book ai didi

html - 嵌套 flexbox 中的 Overflow-x

转载 作者:行者123 更新时间:2023-11-28 03:54:11 24 4
gpt4 key购买 nike

<分区>

我正在尝试使中央面板成为嵌套 flexbox 元素中的可滚动区域(x 和 y)。

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>

注意:将示例展开为全窗口模式。

在非嵌套场景中,水平滚动对中央面板工作正常:

Horizontal Flexbox Example

Vertical Flexbox Example

但是,当嵌套时,中央面板的水平滚动不会按预期激活。 Chrome、Firefox 和 Edge 似乎就是这种情况。有趣的是,它在 IE11 中按预期工作,这表明现代浏览器正确解释了一些我不知道的规范。

我错过了什么?

更新:似乎需要在外部中央列上设置 overflow:auto。有了这个,它的行为就如预期的那样。这是为什么?

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com