Exploring the varying flexbox behavior with (overflow-y) scroll on Safari, Firefox, and Edge compared to Chrome

Question

Exploring the varying flexbox behavior with (overflow-y) scroll on Safari, Firefox, and Edge compared to Chrome

When viewing this plunker page on Chrome for Windows and Android (including Canary), everything functions properly. I am able to scroll the two areas on the left and right, and the top and bottom divs of the page remain at the top and bottom of the device screen at all times. However, when attempting to view the page on iPad or iPhone using Safari or Chrome, as well as on Firefox 47.0.1 for Windows, the display is different.

The page is lengthy, yet there is only one scroll bar on the right, almost as if the flexbox code is being 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;
}

Issue Example:

You can observe the discrepancy on iPad or iPhone by clicking on this button:

Why is this happening? Is it a bug in Safari and Firefox or Chrome? Why does it work fine on Chrome for Windows and Android? If the issue is resolved in future versions of Safari, how can we handle older devices with older iOS and Firefox versions?

Any insight or assistance on this matter would be greatly appreciated. Thank you.

css google-chrome webkit flexbox twitter-bootstrap-4

Answer 1

Answer №1

Dealing with this issue can be quite frustrating and puzzling.

The root cause of this problem in similar scenarios typically lies in the minimum sizing algorithm on flex items. These regulations, specified in the rules, prevent a flex item from shrinking below the size of its content. As a result, when the content cannot overflow a flex item, a scrollbar cannot be displayed, and the item simply expands instead.

Despite attempting standard methods to override this behavior (e.g., min-height: 0, overflow: hidden), none seem to be effective in this particular case.

Here are a couple of recommendations that may bring you closer to a resolution:

(1) To ensure the entire layout fits within the viewport without a vertical scrollbar on the browser window, avoid using min-height to size the container. Instead, specify a fixed height.

To make this adjustment to your code:

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

However, this modification alone may not completely solve the issue.

(2) A straightforward and swift solution to this problem is to assign a height to .col-6.

Include the following in your code:

.col-6 {
    height: 90vh;
 }

Hence, it seems that Edge, Firefox, and other browsers experiencing issues require a defined height on that specific container.

revised demo

Answer 2

Dealing with this issue can be quite frustrating and puzzling.

The root cause of this problem in similar scenarios typically lies in the minimum sizing algorithm on flex items. These regulations, specified in the rules, prevent a flex item from shrinking below the size of its content. As a result, when the content cannot overflow a flex item, a scrollbar cannot be displayed, and the item simply expands instead.

Despite attempting standard methods to override this behavior (e.g., min-height: 0, overflow: hidden), none seem to be effective in this particular case.

Here are a couple of recommendations that may bring you closer to a resolution:

(1) To ensure the entire layout fits within the viewport without a vertical scrollbar on the browser window, avoid using min-height to size the container. Instead, specify a fixed height.

To make this adjustment to your code:

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

However, this modification alone may not completely solve the issue.

(2) A straightforward and swift solution to this problem is to assign a height to .col-6.

Include the following in your code:

.col-6 {
    height: 90vh;
 }

Hence, it seems that Edge, Firefox, and other browsers experiencing issues require a defined height on that specific container.

revised demo

Answer 3

Answer №2

Michael_B's response just didn't cut it. When dealing with a dynamic header, footer, and other divs, the 90vh solution falls short.

To address this issue (albeit temporarily, until Safari addresses it), I added the following to the parent div:

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

Additionally, I included

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

Nonetheless, something still feels off.

Answer 4

Michael_B's response just didn't cut it. When dealing with a dynamic header, footer, and other divs, the 90vh solution falls short.

To address this issue (albeit temporarily, until Safari addresses it), I added the following to the parent div:

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

Additionally, I included

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

Nonetheless, something still feels off.

Answer 5

Answer №3

Consider this approach:

justify-content: center;

This CSS property can be applied to the flex-item for achieving the desired result. It worked for me, possibly due to the magic of center...

Sharing this discovery as other options like max-width, text-align, etc... were not consistently effective for me either.

Answer 6

Consider this approach:

justify-content: center;

This CSS property can be applied to the flex-item for achieving the desired result. It worked for me, possibly due to the magic of center...

Sharing this discovery as other options like max-width, text-align, etc... were not consistently effective for me either.

Exploring the varying flexbox behavior with (overflow-y) scroll on Safari, Firefox, and Edge compared to Chrome

Answer №1

revised demo

Answer №2

Answer №3

Similar questions

Interactive menu backdrop determined by div element

Enhancing the appearance of unvisited links with background styles

The table borders in IE 11 do not display properly when using Html5 and CSS

Troubleshooting issues with Jquery fadeIn and fadeOut - tips for implementing fadein animation using addclass and mouseover

Tips on effectively utilizing CSS sprites without a border on images

Angular2 application encounters issue with target attribute being overlooked by Chrome

Protecting against overflow for text inside a container that changes when hovered over

Slider Volume with jQuery

Placing a crimson asterisk beside the input field within Bootstrap

When resizing the browser, HTML/CSS elements tend to shift positions :(

Looking to eliminate a significant gap of white space

Is the scaling of a div with an image affected by odd pixel sizes?

Updating Text within a Label with jQuery

Simplified user interface for detecting radio button clicks

Utilizing CSS attr() for setting the width dimension

What is the best way to have text fit perfectly into a table cell?

Customize the Underline Color in MaterialUI Select Component

Creating a custom blockquote style for a WordPress Twenty Fifteen child theme

Utilizing Extjs to incorporate a display field with an image as a label

Can you explain the purpose of CSS classes such as my-2, my-lg-0, and mr-sm-2 in Bootstrap 4?