0

I have flexbox container with equal columns. Each column can not be smaller than 100x500px. If the container does not fit all the columns, scrollbars should appear. If it fits, the columns should stretch to fill all the available space.

Here's my code:

<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/

It seems to be correct at the first glance. But what about the container width? It contains 5 columns, that's why it's width is at least 500px. But in case when the screen size is smaller than 500px (and when scrollbars are visible) debugger shows that the container width is only the width of the visible part.

Why so? It seems weird for me.

Even more, assume we want to add some overlapping grid over the columns, like this: https://jsfiddle.net/kasheftin/v2a72wu9/. We see that the grid lines do not cover the whole container in case when horizontal scroll is visible. The same time everything is fine with the vertical dimension.

How to fix that?

Kasheftin
  • 7,509
  • 11
  • 41
  • 68
  • Your second paragraph (starting with: "It seems...") is unclear. Where do you have the container set to a width of "at least 500px"? – Michael Benjamin Oct 05 '17 at 10:30
  • The problem described in your last paragraph is possibly explained here: https://stackoverflow.com/q/45497031/3597276 – Michael Benjamin Oct 05 '17 at 10:32
  • Each column is at least 100px width, there're 5 columns, so the container width is at least 5x100px = 500px. It's hidden by the external container with scrollbars, but you may scroll it around and see that the area covered by columns is 500px width. – Kasheftin Oct 05 '17 at 11:23

0 Answers0