10

In this page on plunker (https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview) there is a weird problem.

On Chrome on Windows and Android (Canary also) everything works good. I can scroll the two areas (on the left and on the right) and the top and bottom div of the page are on the top and on the bottom of my device screen. I see them anytime (see the picture below).

Example of scroll on Chrome on Windows, Good

On iPad or iPhone, iOS, with Safari or Chrome, this is not what I get. And also on Firefox 47.0.1 on Windows.

The page is long and there is just one scroll on the right, like if there is no flexbox on the page, this code is just ignored:

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
  display: flex;
}
.col-6 {
  overflow-y: auto;
}

Quirk example:

Firefox 47.0.1 on Windows

You can see on the iPad or iPhone just by a click on this button:

Click for plunker fullscreen

Why this behaviour? Safari and Firefox bug or Chrome's one? Why on Chrome everything good on Windows and Android? And if in the new Safari in the future this will work good, how to do with the older devices with older iOS and firefox?

I will appreciate any answer. Thanks.

  • Perhaps things have changed, but as of now, for Chrome on Windows I see the same problem you used to see on the other platforms, and I cannot figure out how to make scrolling flex-boxes nested inside of bootstrap columns due to the fact that as soon as you want to have columns, you break the "chain" of column-direction flex boxes going up to the full-viewport size container at the top. If anyone is able to do this now, that'd be cool! – C.List Apr 21 '20 at 15:08

3 Answers3

7

It's both a frustrating and mysterious problem.

The source of the problem in these sorts of questions is normally the minimum sizing algorithm on flex items. These rules, which are part of the spec, prevent a flex item from shrinking past the size of its content. Such behavior prevents a scrollbar from rendering because the content cannot overflow a flex item. It simply expands it.

But none of the standard methods to override that behavior (e.g., min-height: 0, overflow: hidden) seem to work in this case.

Here are two suggestions that may get you closer to a solution:

(1) Since you want the entire layout to appear in the viewport (i.e., no vertical scrollbar on the browser window), don't use min-height to size the container. That allows the container to expand. Use a fixed height instead.

Make this adjustment to your code:

.bigone {    
    display: flex;
    /* min-height: 100vh;   <-- REMOVE */
    height: 100vh;       /* <-- NEW   */
    flex-direction: column;
}

But that, by itself, doesn't solve the problem.

(2) A simple and quick solution to the problem is to set a height on .col-6.

Add this to your code:

.col-6 {
    height: 90vh;
 }

So it would appear that Edge, FF and the other "non-working" browsers need a defined height on that container.

revised demo

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • I tried this solution (height: 90vh), it works, but I have dynamic footer and header in the page, especially on all the devices (iPhone, iPad, Android...). I don't believe this possible in 2017! :( :( –  Apr 03 '17 at 20:50
  • Try changing the structure of the HTML. Maybe use less containers. – Michael Benjamin Apr 04 '17 at 02:40
  • A very good guy on github suggests this: https://github.com/twbs/bootstrap/issues/22339#issuecomment-291356383: (1) add min-height:0 to the .main element (2) reset flex-wrap to its initial value (nowrap) on the .row element. What do you think? It doesn't work on Safari on iOS, just in Chrome and Firefox on Windows. –  Apr 04 '17 at 18:41
  • 1
    +1 for a very well written answer. I have had this problem before myself and the solution was to ensure there was either content inside the flexed container to give it a block height, or to set actual height on the container. @JohnSam If I may be so bold to suggest having a look at [caniuse](https://caniuse.com/#feat=flexbox) - specifically have a look at the _Known Issues_ section at the bottom of the page. It also seems like you have a very specific layout problem here and may want to consider approaching it from a different angle? Have you considered using jQuery? – Frits Apr 11 '17 at 05:28
1

The Michael_B's answer is not enough. 90vh doesn't work with dynamic header, footer and other divs.

I fixed this (temporarily, until Safari fix this) with this on parent div:

min-height: 100vh; height: 100vh;

and

flex: 1; min-height: 0;' on the first children.

But the smell is heavy.

0

Try:

margin: auto;

in the css for the flex-item - that did the trick for me (seems like the auto does the magic here ...)

Wanted to share that finding, as min-height, overflow-x, etc ... did not work reliably for me neither.

Jürgen Fink
  • 3,162
  • 2
  • 23
  • 25