Bug 233263 – When all elements in flexbox main axis are flexed, there should be no overflow in that axis.

• Status: NEW
• Component: Layout and Rendering

[Nige White]

Created attachment 444536 [details]
Bug page

Ensure scrollbars are visible if you use OSX.

Using the attached HTML file, you can adjust the height of the '.container' element in 0.01px increments using the slider.

At just a few particular heights, a vertical scrollbar appears.

Given that all the elements in the vertical flexbox are flex-grow:1 and flex-basis:0%, and do not violate any minHeight constraints, there should be no overflow.

Regardless of the maths involved and remainders after calculation of the child heights, requesting that all children are flexed, and no height constraints implicitly specifies that there should be no vertical overflow.

I have currently found height 600.47, but there are many other "breakpoints" where it creates overflow.

[Nige White]

Created attachment 445028 [details]
Screenshot of the problem

[Radar WebKit Bug Importer]

<rdar://problem/85731339>

[Ahmad Saleem]

I am still able to reproduce this bug in Safari 16.1 and on certain heights from slider, it does show "vertical" scrollbar and so does "Chrome Canary 109", I am not able to reproduce this in Firefox (it could be due to -webkit- prefixes) but moving slider does not show "vertical scrollbar" though.

Just wanted to share updated results. Thanks!

[Nige White]

I think Firefox have fixed it. I cannot find any container height which produces a scrollbar on Firefox. I cannot find the original bug report I filed with them. Searching for "flexbox" and "overflow" and "scrollbars" shows a lot of bugs being fixed though.

Chrome still shows a scrollbar at certain heights. 601.23px for example.

[Nige White]

This is the Chromium report: https://bugs.chromium.org/p/chromium/issues/detail?id=1270275

[Nige White]

Still shows a scrollber at certain container heights when all child items are willing to shrink.