There is no space on the right for overflow scroll items in Flexbox CSS

Question

I have a scenario where the child elements inside Flexbox div should be nowrap and then scroll horizontally if the child items exceeds the maximum allowed space.

Please check the link: https://www.w3schools.com/code/tryit.asp?filename=FY50HW0O11JZ

As you can see in the above link the space over the right side is eliminated.

How can I include the padding/margin space of parent div or child div while using horizontal scrolling?

Thanks in advance!

score 1 · Accepted Answer · answered Dec 12 '18 at 13:23

If you wrap the white boxes in an another div with display flex and apply padding-right for that div, you will have the space at the end.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .a {
                display: flex;
                flex-direction: row;
                overflow-x:auto;
                background: yellow;
            }
            .a1 {
                min-width: 300px;
                border: 1px solid;
                background: white;
                flex: 0 0 auto;
                overflow:auto;
            }
        </style>
    </head>
    <body>

    <div class="a" style="max-width: 500px; border: 1px solid; padding: 30px;">
            <div style="display: inherit">
                <div class="a1">a</div>
                <div class="a1">b</div>
                <div class="a1">c</div>
            </div>
        </div>
    </body>
</html>

It seems to work, but I cannot insert one more div into the code, not in my actual scenerio — Harikrishnan N, Dec 12 '18 at 13:32

There is no space on the right for overflow scroll items in Flexbox CSS

1 Answers1