Flex-layout creates strange whitespace - but not in edge - why?

Question

I want to make a scrollable-table with flexbox.
The table with static sizes has to fit into a viewport of fixed-size.
Basically something along the lines of:

<div class="container" style="width: x; height: y; overflow: scroll">
   <div data-row="1">
       <div data-column="1"></div>
       <div data-column="2"></div>
       <div data-column="3"></div>
   </div>
   <div data-row="2">
       <div data-column="1"></div>
       <div data-column="2"></div>
       <div data-column="3"></div>
   </div>
   <div data-row="3">
       <div data-column="1"></div>
       <div data-column="2"></div>
       <div data-column="3"></div>
   </div>
</div>

This is what I have so far:

#viewport {
  border: 1px solid black;
  overflow: auto;
  width: 350px;
}

#content {
  #position: relative;
  overflow: hidden;
}

.cell {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.column {
  width: 200px;
  height: 100px;
}

.row {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 1px solid black;
  #overflow-x: scroll;
  overflow: visible;
  box-sizing: border-box;
}

.viewport {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 500px;
  overflow: scroll;
  flex-wrap: wrap;
  #flex-wrap: nowrap;
  box-sizing: border-box;
  flex-basis: 0;
}

<div class="viewport"><!--
        --><div class="row"><!--
            --><div class="cell column" style="background-color: red;"></div><!--
            --><div class="cell column" style="background-color: green;"></div><!--
            --><div class="cell column" style="background-color: blue;"></div><!--
            --><div class="cell column" style="background-color: hotpink;"></div><!--
        --></div><!--
        --><div class="row"><!--
            --><div class="cell column" style="background-color: red;"></div><!--
            --><div class="cell column" style="background-color: green;"></div><!--
            --><div class="cell column" style="background-color: blue;"></div><!--
            --><div class="cell column" style="background-color: hotpink;"></div><!--
        --></div><!--
    --></div>

But this gives me strange white space.
But only in Chrome and IE11 - in Firefox and Edge it works fine.

If I remove flex-wrap on .viewport, I get the same problem in Edge and Firefox.
Also, I don't really want that flex-wrap on .viewport.

I have so far been unable to figure out what the problem is.
This kind of crap drives me crazy. Anybody has an idea ?

Have you checked the browsers default styles? Maybe somewhere is a inherited margin. — , Jul 31 '18 at 12:31
If I add " * { margin:0px; padding: 0px; }", the problem persists. — Stefan Steiger, Jul 31 '18 at 12:33
it's not strange for me.. these are space for the borders and your element are overflowing — Temani Afif, Jul 31 '18 at 12:41
@Temani Afif: box-sizing: border-box; Also, if that is true, then why does it render the border correctly until the first one-and-a-half divs. — Stefan Steiger, Jul 31 '18 at 12:44
I know but it's not the issue .. the element are inside another element with border and they are overflowing, so the outer element stops and inner element continues. So the space of the border is kept — Temani Afif, Jul 31 '18 at 12:46
it might be a specific browser bug, but it's not strange ... we simply need to know what browser is not respecting the logic but both situation are somehow logical — Temani Afif, Jul 31 '18 at 12:47
@Temani Afif: I don't see where it should be overflowing other than the .viewport - where that is intentional. — Stefan Steiger, Jul 31 '18 at 12:50
Why would you set the viewport to 350px and the 4 columns' width to 200px each (800px in total). The row's width is limited to the viewport's width. Row has a border of 1px but stops after 350px, so the other space (550px) is shown as a gap of 2px. It makes sense, right? — Thomas van Broekhoven, Jul 31 '18 at 13:08
@Thomas van Broekhoven: As you can see, the row's width is NOT limited to the viewport width... Aparently, only the border's width is limited to the viewport width... — Stefan Steiger, Jul 31 '18 at 13:30
This looks like a `border` + `overflow` issue, as mentioned by @TemaniAfif (along with browser rendering variations). A similar problem exists with `background-color` + `overflow`, as I covered here: [Make background color extend into overflow area](https://stackoverflow.com/q/45497031/3597276). — Michael Benjamin, Jul 31 '18 at 13:32
@Michael_B you're right, excuse me. But why not give row `width: 802px;`, since all sizes are static? — Thomas van Broekhoven, Jul 31 '18 at 13:36
@Thomas van Broekhoven: Yea, just got that, too. Then it works. Wonder why the 2 additional px - of course because of the border - but it's border-box... — Stefan Steiger, Jul 31 '18 at 14:05

score 1 · Accepted Answer · answered Jul 31 '18 at 14:05

1

The problem is explained when referring to the CSS Box Model:

^{source: W3C}

As you can see, a border applies to the border area of an HTML element. That's as far as it goes.

A border is not designed to extend into the overflow area of an HTML element, which comes after the margin area. This is why your borders are truncated upon scroll, which takes the user into the overflow area.

Browser behavior may vary because the specs are not laws, they are guidelines. Browser developers can deviate from the spec anytime they wish.

For more details see the following post covering background-color and overflow behavior, which is practically identical to this border and overflow behavior: Make background color extend into overflow area

answered Jul 31 '18 at 14:05

Michael Benjamin

346,931
104
581
701

Yea, thought that Edge is the actual bug. This confirms it. By the way, this applies to background-color as well, as i found out. – Stefan Steiger Jul 31 '18 at 14:07
1

Yeah, I mention background color in my comments to your question and at the bottom of my answer. Also, "**bug**" may be one way to describe it. Browsers developers may refer to this an "[**intervention**](https://github.com/WICG/interventions)". – Michael Benjamin Jul 31 '18 at 14:09
1

Yea, in this case, the bug is quite obviously a feature - but wonder if they cared to think about possible side-effects ;) – Stefan Steiger Jul 31 '18 at 14:09

Flex-layout creates strange whitespace - but not in edge - why?

1 Answers1