gpt4 book ai didi

html - 滚动条无法出现在两个 flexbox 容器中

转载 作者:行者123 更新时间:2023-11-28 11:30:43 26 4
gpt4 key购买 nike

我有两个并排放置的容器,它们具有共同的页眉和页脚。一切都是通过较新浏览器中可用的 flex 布局完成的(注意:我的代码使用的是 webkit 特定指令)。

问题是,如果调整浏览器窗口的大小,我无法使滚动条出现在两个容器中。我得到的只是一个可以滚动所有内容的滚动条。如何做到这一点?

JSBin example here .

HTML 非常简单:

<html>
<body>
<div class="container">
<div class="search">Search bar</div>
<div class="main">
<div class="search-results vertical pane">
<strong>Search results</strong>
<ul>
<li>Item</li>
...
<li>Item</li>
</ul>
</div>
<div class="content vertical pane">
<strong>Item</strong>
<ul>
<li>Item detail</li>
...
<li>Item detail</li>
</ul>
</div>
</div>
<div class="footer">
<strong>Footer</strong>
</div>
</div>
</body>
</html>

CSS 在这里:

html, body {
height: 100%;
}

.container {
background-color: lightyellow;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-flex-flow: column;
height: 100%;
}

.main {
background-color: lightgrey;
-webkit-flex: 1;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-flow: row;
}

.vertical {
overflow-y: auto;
}

.pane {
width: 50%;
}

.search {
width: 100%;
background-color: pink;
-webkit-flex: 0.01;
}

.footer {
width: 100%;
background-color: yellow;
-webkit-flex: 0.01;
}

.search-results {
background-color: lightblue;
}

.content {
background-color: lightgreen;
}

最佳答案

我认为你必须添加一个高度/最大高度,高于容器的内容。

例如:

.vertical {
max-height: 200px;
overflow-y: auto;
}

Demo

关于html - 滚动条无法出现在两个 flexbox 容器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21163383/

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