我的flexbox容器具有相同的列。 每列不能小于100x500px。 如果容器不适合所有列,则应显示滚动条。 如果它适合,列应该拉伸以填充所有可用空间。
这是我的代码:
<div class="scrolls">
<div class="container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
.scrolls {
position: absolute;
top: 100px;
right: 100px;
bottom: 100px;
left: 100px;
overflow: auto;
}
.container {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
height: 100%;
}
.col {
flex: 1 0 100px;
min-height: 500px;
}
https://jsfiddle.net/kasheftin/k5babpsr/
乍一看似乎是正确的。但是容器宽度呢?它包含5列,这就是为什么它的宽度至少为500px。但是,如果屏幕大小小于500px(当滚动条可见时)调试器显示容器宽度只是可见部分的宽度。
为什么这样?这对我来说似乎很奇怪。
更重要的是,假设我们要在列上添加一些重叠网格,如下所示:https://jsfiddle.net/kasheftin/v2a72wu9/。我们看到,当水平滚动可见时,网格线不会覆盖整个容器。同时,垂直尺寸的一切都很好。
如何解决这个问题?