Simply add min-height: 0 to the flex child that has our overflow container. This feature was removed and then re-added back into the spec at some point. It turns out that there was a feature in the flexbox specification that added an implied minimum size for flex items. It just so happens that this mistake it harder to see on platforms that hide scrollbars by default.Under certain circumstances overflow needs a little extra love. And, I believe that, in most cases, developers intend to use overflow: auto, not overflow: scroll. Ultimately, your CSS should be written with intent.
Otherwise it will become harder and harder for them to learn how scrollbars actually work for all of their users.īut, this post isn't about how different platforms render scrollbars - this post is about the differences between various CSS overflow properties. To me, this makes it even more important that younger developers enable visible scrollbars.
This fosters a better understanding of the CSS overflow property and, makes it easier for me to build consistent interface behaviors across platforms.ĪSIDE: It seems that recent versions of Windows now allow you to automatically hide scrollbars. This is why I always go into my Apple settings and set the rendering of scrollbars to be always. For example, here's this demo in IE11 (Internet Explorer 11):Īs you can see, IE11 is true-to-form on the CSS overflow property. But, to me, it makes the user interface just a little less obvious and a little less usable.Īnd, the fact of the matter is, overflow: scroll will show scrollbars on other platforms. Yes, it "looks nice" to have a UI with no scrollbars. But, on a desktop computer, where there is an abundance of space, I think hiding the scrollbars by default is a strange usability choice.
On a mobile device, where there is so little screen real estate, it's a fine trade-off. Personally, I don't love that Apple's MacOS hides the scrollbars by default. When using overflow: auto, on the other hand, the browser only renders the scrollbar when it is needed and, only on the axis (x or y) for which it is need.ĪSIDE: You can also use the CSS properties overflow-x and overflow-y, instead of overflow, to apply more selective control over when and how the scrollbars are rendered.
Now, if we render this on a modern Apple device with default settings, both overflow container examples look exactly the same:Īs you can see, the containers that use overflow: scroll always render a scrollbar regardless of whether or not content is large enough to require scrolling. Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size ContainersĬontent: "This is much longer content over here which will cause more scrolling than the short content, which should make the scrollbar behavior more apparent in the demo." Īs you can see, the two different sets of containers vary only in their use of the overflow property. For each set, one example has content that fits entirely within the container dimensions and, the other example has content that requires handling of the overflow container. To see this in action, I've created a simple demo in which we have two sets of containers: one with overflow: scroll and one with overflow: auto. With overflow: auto, the browser only renders the scrollbars if the container actually has to scroll that is, only if the content does not fit entirely within the container dimensions. With overflow: scroll, the browser renders the container scrollbars always, even if the content fits entirely within the container dimensions. The difference between the two CSS values dictates when the browser renders the actual scrollbar. When we use either overflow: auto or overflow: scroll, we're telling the browser to scroll the container when the content doesn't fit entirely within the container dimensions. In a fixed-size container, we can use the CSS overflow property to define how the browser will render content inside of said container.
View this code in my JavaScript Demos project on GitHub. Run this demo in my JavaScript Demos project on GitHub. As such, I just wanted to quickly outline the difference in CSS overflow behaviors. Unfortunately, on Apple products, spotting this mistake is difficult. More and more, I see web developers accidentally using overflow: scroll when what they intended to use was overflow: auto. This change in the Apple ecosystem has made it difficult for younger web developers to build a strong instinct for the CSS overflow property. Then, later on, MacOS followed-suit, turning off scrollbar visibility by default. Thin little scrollbars showed up when you started to scroll but, for the most part, the Apple iPhone user interface (UI) was scrollbar-free.
Well, at least, not scrollbars that were visible all the time. When the Apple iPhone came out in 2007, the default Safari Mobile browser didn't have scrollbars.