Question

我的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/。我们看到，当水平滚动可见时，网格线不会覆盖整个容器。同时，垂直尺寸的一切都很好。

如何解决这个问题？

带有弹性柱的可滚动容器

0 个答案: