Скачать или смотреть Understanding Why overflow-y: auto May Not Work as Expected

Discover solutions for why `overflow-y: auto` doesn't create scrolls in your CSS Flexbox layout and effective tips to fix it.
---
This video is based on the question https://stackoverflow.com/q/62980037/ asked by the user 'Rahulsingh190' ( https://stackoverflow.com/u/2952250/ ) and on the answer https://stackoverflow.com/a/62980363/ provided by the user 'Michael Benjamin' ( https://stackoverflow.com/u/3597276/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why does overflow-y: auto not create scroll?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Why Doesn’t overflow-y: auto Create Scrolls?

When working on a responsive website that utilizes CSS Flexbox, encountering issues with scrolling can be frustrating. Specifically, if you have a sidebar and a main content area where you want to implement vertical scrolling, you might be wondering why setting overflow-y: auto is not yielding the desired effect.

The Problem

In your project, you applied overflow-y: hidden on the body element, which prevents any vertical scrolling on the entire page, negating the functionality of overflow-y: auto set on the sidebar content. When these two overflow properties interact, it results in complications that hinder the natural scroll behavior you intend to achieve.

Here’s a brief recap of your situation:

You have a left sidebar (fixed) and a right content area where you want to implement scrolling as content overflows.

You used overflow-y: hidden on the body and overflow-y: auto on the right content area, but the scrolling isn't functional.

Solution Overview

To fix this issue, let's clean up your existing CSS and make the necessary adjustments that will allow the right content area to scroll effectively while keeping the sidebar fixed and functional. Here’s how you can achieve this.

Step-by-Step Cleanup

Remove overflow-y: hidden from Body
Keeping overflow hidden on the body element prevents scrolling on all child elements. Remove it to enable the scroll on the content area.

Simplify Flexbox Container
Ensure your container is set properly to define the layout without unnecessary constraints. The following adjustments can be made to your .outside class and other elements.

Modify Product Container’s Flex Properties
The products container should take up the remaining space after the sidebar. Adjust flex properties accordingly.

Revised Code

Here’s a simplified version of your CSS and HTML after making the necessary changes:

Updated CSS

[[See Video to Reveal this Text or Code Snippet]]

Updated HTML

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By adjusting the layout and removing conflicting overflow properties, you can effectively allow vertical scrolling in your right content area. Ensure that your flex settings provide enough space for the sidebar while permitting the main content to scroll seamlessly when it exceeds the visible area.

Now, go ahead and implement these changes in your code. You should see the overflow-y: auto in action, enriching the user experience on your responsive website!