gpt4 book ai didi

html - 使用 CSS Flexbox 时水平滚动中断

转载 作者:可可西里 更新时间:2023-11-01 13:22:08 25 4
gpt4 key购买 nike

<分区>

我有一个 div - scrolling-div,当屏幕尺寸(宽度)变小并且内容溢出时,它应该水平滚动。

将此添加到要使其可滚动的 div 通常有效:

overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
width: 100%;

但问题是,我必须将内容垂直居中,所以我使用了 Flexbox 来做到这一点。但这导致卷轴破裂。

HTML:

<div class="container">
<div class="inner">
<p>
Some other content here dsdfdsf dsfdsfsdf dsfdsf
</p>
<div class="scrolling-div">
<div class="bucket">
<p>
hello
</p>
<p>
yellow
</p>
</div> <!-- Add more buckets -->
</div>
</div>
</div>

CSS:

* {
box-sizing: border-box;
}

.container {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
text-align: center;
}

.scrolling-div {
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

.bucket {
display: inline-block;
width: 66px;
border: 1px solid;
margin-left: 10px;
margin-right: 10px;
text-align: center;
}

我需要水平和垂直居中 .inner.container 但我还需要 scrolling-div 来滚动。我做错了什么?

这是一个fiddle对于上面的代码。

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