Scrollable flex container
The Solution at a Glance
- Size the flex container to be smaller than the flex items, so that the flex items can overflow. Scrolling can only happen when the flex items can’t fit inside the flex container.
- Stop flex items from shrinking too much so that they overflow the flex container.
- Enable scrolling by setting
overflowtoautoorscrollon the flex container. - Keep the flex items on a single flex line so they can overflow instead of wrapping into multiple flex lines.
Size the flex container
Make sure the flex container’s size is smaller than the size of the flex items. If the flex container is sized based on the flex items, then there won’t be anything to scroll because as the flex items’ size changes, the size of the flex container will change, too.
The sizing of the flex container depends on the layout type that the flex container takes part in. That’s decided by the parent box of the flex container.
For instance, imagine you have a flex container with : column. That means the main direction goes vertically from top to bottom. So the flex items will be laid out from top to bottom.
The flex container element is a child of the body element, and body is the child of the html element. Both body and html keep the display: block that the browser sets for them. Let’s say the flex container element is a main element. The browser sets display: block for main elements, too.
This means the flex container will be a block-level box in Flow layout. Flow layout is the default type of layout in CSS. In this situation, the flex container will be as wide as the content box of body, and as tall as the flex items inside it. This is because both inline-size and block-size have the auto value by default, and that’s how auto behaves in Flow layout.
Because the flex container will be as tall as the flex items, the flex items will not overflow and there won’t be a need for scrolling. For scrolling to happen, the flex container needs to have a different size that’s smaller. For example, block-size: 200px.
So whatever the type of layout that’s used for the flex container, you’ll need to make sure the flex container’s size doesn’t depend on the size of flex items.
Stop flex items from shrinking too much
Flex items shrink by default to fit into the flex container’s content box. But because we want the flex items inside the flex container to be scrollable, by definition some of them have to overflow the flex container.
The flex items shrink by default because the initial value of flex-shrink is 1. Any number above 0 means “okay, I’ll shrink”.
Flex items will stop shrinking when they reach their automatic minimum size, which is calculated based on their content. But you can set your own minimum size, too.
Alternatively, you could have your flex items ask for a specific size with flex-basis, and then prevent all shrinking by setting flex-shrink: 0.
Enable scrolling on the flex container
By default, the flex container will just let all the overflowing flex items be visible outside the flex container’s content box. That’s because the initial value of overflow is visible.
You can instead have the overflowing flex items hidden from view, and only reachable by scrolling the flex items inside the flex container. You do that by setting overflow to either scroll or auto.
When you set it to scroll, the flex container will always act like it has things to scroll inside of it. Even if the flex items don’t actually overflow. So, for example, visible scroll bars could be shown by the browser in that case.
When you set it to auto, the flex container will only act like a scroll container when the flex items actually overflow the flex container.
Keep the flex items on a single flex line
The flex items have to overflow the flex container so there’s a need for scrolling. If the flex container were to allow the flex items to wrap with : wrap, the flex items would wrap instead of overflowing.
You don’t need to do anything in this step, just make sure you don’t change the initial value of : nowrap on the flex container.