In Chrome, there is an issue between CSS Flexbox and the overflow-x:hidden property

When using css flexbox to create a header/body/footer layout and adding overflow-x:hidden to the outer-div, Chrome may crop the bottom (the status element) when reducing the viewport height. This results in a vertical scrollbar being introduced.

On the other hand, Firefox behaves as expected by adjusting the body-element height and displaying the statusbar even when the browser height is reduced. Chrome only restores the correct layout after reloading the page or changing the viewport width.

To see this difference between Chrome and Firefox, check out the sample on Stackblitz: https://stackblitz.com/edit/angular-xtapbp

You can compare the behavior of Chrome and Firefox by opening the above Stackblitz link in both browsers.

Answer №1

In flex layouts, the implied value of `min-height` (or `min-width` for default `flex-direction: row` orientation) is set to `auto`. However, Chrome sometimes incorrectly treats the initial page render size as the current `auto` value, causing layout issues when resizing the window. This behavior may be a bug in Chrome's CSS layout engine. To fix this issue, you can add `min-height: 0` to the content+status div. Check out an example of this solution in this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it necessary to conceal the element every time the jQuery slideDown function is utilized?

Previously, I inquired about a certain matter related to this topic, but the response I received didn't provide a clear explanation. When pressing the 'duplicate' button on my form, instead of the input field simply appearing, I would prefe ...

javascript jquery html

What is the Best Way to Ensure Consistent Image Heights in a Bootstrap Row?

I am struggling with aligning the heights of three images in the same row while preserving their aspect ratio. I attempted to use 'display: flex;' for the parent container (.carousel-content-container) and assign 'flex' property based o ...

html css bootstrap-4 height

Showing a tooltip in Angular when a button is disabled

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" ...

javascript html css bootstrap-4 angular-material

Error encountered while attempting to refresh Angular 2 deployment on Azure: The requested resource has been deleted, its name has been modified, or it is currently not accessible

My Angular 2 rc-2 application has basic routing set up with paths /path1 as the default path and /path2. The home path / redirects to /path1. Locally, when running on lite-server, everything works perfectly. However, upon deploying the app to an Azure web ...

angular azure angular2-routing

How can you use Flexbox to vertically center the content of a list item?

Here is a simple list example that I have created: ul{background:wheat;height:200px;text-align:center;} li{height:200px;display:inline-block;margin-right:10px;background:green;color:white;} <ul> <li>Item 1</li> ...

html css flexbox centering

Preventing navbar resizing on websites

I'm trying to have a section on the navbar dedicated for text or alerts that appear based on certain events. However, even when the alert is hidden, it still affects the height of the navbar. How can I resolve this issue? It may be difficult to see i ...

html css twitter-bootstrap bootstrap-5

Why is the :nth-last-child(-n+3) selector not compatible with the article element?

I've been trying to figure out why the :nth-last-child(-n+3) {} selector is not working for the article element in my document markup. It should work according to comments I've seen, like in this example: http://jsfiddle.net/8PXXm/ However, when ...

css

Having trouble with the responsive design not functioning properly?

Having trouble with mobile view in my simple HTML Bootstrap code. Everything looks fine in desktop view but not in mobile. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < ...

html twitter-bootstrap responsive-design

What is preventing me from accessing the sub-elements of an AngularJS controller?

I know this question has probably been asked countless times before, but I'm struggling to find the right words to explain my specific issue. Essentially, I'm having trouble accessing something like $ctrl.thing.subelement. However, the following ...

javascript html angularjs

Adjusting the parent with CSS transitions to perfectly align with the final height of a

Jade example div.parent div.child1 div.child2 Upon initial load, Child1 is visible. Clicking will hide Child1 and make Child2 visible. Another click will reverse this action. During the transition between hiding and showing the children, there s ...

html css css-transitions css-animations

What is the reason for receiving HTTP headers in addition to non-HTML data when parsing a webpage in Java?

I have attempted various methods to extract data from the internet, but all of them end up pulling the header along with the file I'm trying to save: Take the following code for example: URL url; String webURL = "http://www.wunderground.com/history/ ...

java html

What is preventing the assignment of a class attribute inline using JavaScript?

<html> <head> <style> .tagging { border: 1px solid black; width: 20px; height: 30px; } </style> <script> window.onload = function() { var div = document.getE ...

javascript css

Guide on excluding the <src and <href tags from a JSON response in Blogger

"content": "\u003cvideo controls width=800 autoplay\u003e\n \u003csource src=\"https://srv-file8.gofile.io/download/AEiT5Y/www.4MovieRulz.ch - Sunny Winter (2020) 720p Hindi Part-2 HDRip x264 AAC 500MB.mkv&bs ...

html json jsoup blogger

Differences between Firefox and Webkit browsers when it comes to scrolling - How side navigation, text truncation, and

Scrollbar appearance is causing an issue across different browsers. The truncated text in my side-navigation component is not displaying correctly on Firefox and IE browsers. View this fiddle on both Chrome and Firefox: https://jsfiddle.net/d84b9m49/10/ ...

html css firefox cross-browser bootstrap-4

Ionic: A single button to reset all checkbox selections

I have set up a checkbox list that adds selected items to an array, which is then sent to a service. I have a button that empties the array when clicked, but the checkboxes remain checked. When I select items and click the red X, the array is cleared. Af ...

html angular ionic-framework ionic5

What is the best way to automatically format the layers generated by a looping query in my program?

This scenario resembles the process of creating alternating colored table rows, but instead of dealing with table rows and their colors, we are working with divs and margins. The code below creates layers based on the genres retrieved from a query. For in ...

css layout coldfusion

CSSer Q&A