eshansingh1 eshansingh1 - 6 months ago 191
HTML Question

Allow flexbox parent element to horizontally scroll to accommodate children

I have a parent that's using

display: flex;
. It has four children (cards) currently, but it may have more. All the children need big, but equal, widths.
For example, each child needs a
40%
width. If that happens, only a certain amount of children will fit on the screen. I need to be able to do that, and have the rest of the children be accessible with horizontal scrolling.

Image:

explanation image

How do I achieve this? I tried using
flex-wrap: no-wrap;
and then increasing the width of the children, but the parent doesn't allow that. This seems intentional, but I basically want to override this behaviour.

EDIT: The code

HTML

<div id="parent">
<div class="children">
<card-header>
<b class="text"">Text</b>
</card-header>
</div>
</div>


CSS

#parent {
display: flex;
flex-flow: row no-wrap;
align-content: flex-start;
justify-content: space-around;
background-color: blue;
height: 100%;
}

.children {
width: 50%;
height: 100%;
}


NB: There are some media queries in there which I have omitted for simplicity.

Answer

It looks like you're searching for the CSS overflow property.

Try adding overflow-x: auto to the container.

And make the children less flexible.

Instead of this:

width: 50%;

Try this:

flex: 0 0 50%; /* don't grow, don't shrink, stay fixed at 50% width */

The initial value of flex-shrink is 1, which means the flex item will shrink to avoid overflowing the container. With the code above we override the default with 0, which essentially turns off flex shrink.

Comments