gpt4 book ai didi

html - 水平滚动适用于 IE11,但不适用于 Chrome 和 Firefox

转载 作者:行者123 更新时间:2023-11-27 23:37:40 24 4
gpt4 key购买 nike

<分区>

我需要像这样嵌套两个 flexbox:

第一个有两个元素:一个按钮和一个 div,div 填充剩余空间。

div 也是一个包含 3 个元素的 flexbox:2 个按钮(一个左按钮和一个右按钮)和一个可滚动的中间 div

https://jsfiddle.net/mLtwmc62/

.flex-container
{
display: flex;
}

.flex-item-auto
{
flex: 0 0 auto; /* grow shrink basis */
}

.flex-item-fill
{
flex: 1 1 auto;
}

.middle
{
overflow-x: scroll;
}


.big
{
width: 1000px;
height: 20px;
background-color: green;
}
<div class="flex-container">
<button class="flex-item-auto">View All</button>
<div class="flex-item-fill flex-container">
<div class="flex-item-auto">Prev</div>
<div class="middle flex-item-fill">
<div class="big"></div>
</div>
<div class="flex-item-auto">Next</div>
</div>
</div>

在 IE11 上,它按预期工作,我可以看到右键并且可以滚动 div。

但不是在最新的 Chrome 和 Firefox 上,这里整个页面都是可滚动的,而不仅仅是 div。

我还需要让它在移动设备上运行(Safari 8、Android 4.3+)

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