我正在尝试实现水平滚动固定宽度的图片,这些图片被 Package 在div中。整个布局被 Package 在flex中,具有左右布局。
然而,我不能保持父框的宽度不溢出,我需要子框水平滚动,并且它的父框包含在flex中。
小提琴链接:https://jsfiddle.net/wn8zd2t6/43/
.dash {
display:flex;
width:100%;
}
.left {
width: 380px;
height: 100vh;
}
.right {
flex: 1 1 0%;
display:flex;
flex-direction: column;
}
.b {
border:1px solid black;
}
.ig {
display:inline-block;
height:100px;
width:180px;
object-fit: cover;
}
.scrollable {
white-space: nowrap;
overflow-x:scroll;
}
.box {
display: inline-block;
}
<div class="dash">
<div class="left b">
left
</div>
<div class="right b">
<div>
top section
</div>
<div class="container">
<!-- necessary -->
<div>
scrollable section title
</div>
<!-- need this to be scroll -->
<div class="scrollable">
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
</div>
</div>
</div>
</div>
2条答案
按热度按时间u91tlkcl1#
flex-basis: 0%
不足以定义图像容器的固定宽度,因此overflow函数没有断点。使用
width: calc(100% - 380px)
代替flex: 1 1 0%
(380px是另一列的固定宽度)。这就是你所需要的:
revised jsfiddle
x一个一个一个一个x一个一个二个x
fv2wmkja2#
我把你的flex代码简化成了下面的代码,我在图片div中添加了边框样式,以使正在发生的事情在视觉上清晰可见。
请务必记住,要将子元素的宽度约束到具有Flex视图的父元素,父Flex容器必须对其宽度进行约束,即使其宽度为:百分之百;
您可以在. right类中看到这一点,该类控制该列的其余子列如何使用它们的flex-grow。