gpt4 book ai didi

css - 如何在 flexbox 中制作嵌套的可滚​​动容器?

转载 作者:行者123 更新时间:2023-11-28 11:27:04 25 4
gpt4 key购买 nike

<分区>

我有一个 flexbox,里面嵌套了几个 div。更深一层是主要内容(黄色)。我想让它水平滚动,但它只有在 .flexbox.content 之间的 divs 不存在时才有效。因此,如果存在 div,则 .content 上的 overflow-x: scroll 不会像我预期的那样运行。

谁能解释一下?在 flexbox 中创建嵌套的可滚​​动容器的可能解决方案是什么样的?

.flexbox {
display: flex;
}

.content {
background-color: yellow;
height: 50px;
color: black;
overflow-x: scroll;
white-space: nowrap;
}

p {
display: inline-block;
}
<div class="flexbox">
<div> <!-- multiple nested divs like this one -->
<div class="content"> <!-- finally content -->
<p> I want to be able to scroll in here. </p>
<p> Not in the whole page </p>
<p> foo bar content </p>
<p> foo bar content </p>
<p> foo bar content </p>
<p> foo bar content </p>
<p> foo bar content </p>
<p> foo bar content </p>
</div>
</div>
</div>

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