Question 391879 in CSS Question posted in
Some basic documentation can be found here.

CSS container width issue, doesn't play nice with "overflow"?

I believe this is my first time posting here.
I’ve been working in HTML and CSS on and off for 20+ years, but I’m a bit of a noob when it comes to modern HTML5 and CSS, so I don’t know if this is me misunderstanding something or if it’s a bug of some kind. (Probably the former.)

Here I have a mock-up of an interface layout. In general, it’s supposed to be a full-screen interface (no scrolling), within which I want a menu panel that stretches across its container and scrolls horizontally.

<html>
    <style>
        .fullscreen { width: 100%; height:100%; position: absolute; top: 0px; left: 0px; margin: 0px; }
        .border { border: solid black 4px; padding: 8px; }
        .menuitem { display: inline-block; width: 300px; height: 300px; border: solid blue 1px; margin: 8px; }
    </style>
    <div class=fullscreen style="display: flex;"> <!-- full screen container-->
        <div style="padding: 8px; flex-grow: 1; display: flex;"> <!-- screen padding - doesn't play nice with fullscreen -->
            <div class=border style="min-width: 100px; margin-right: 8px;"></div> <!-- left menu -->
            <div class=border style="flex-grow: 1;"> <!-- right content container, grows to fill remaining space -->
                <div class=border style="max-width: 100%;"> <!-- intermediate container for the scrolling view, should be as wide as permissible -->
                    <div style="white-space: nowrap; overflow-x: auto; max-width: 100%;"> <!-- horizontally scrolling view -->
                        <!-- arbitrary contents of the scrolling view -->
                        <div class=menuitem></div>
                        <div class=menuitem></div>
                        <div class=menuitem></div>
                        <div class=menuitem></div>
                        <div class=menuitem></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</html>

The item of focus is the aforementioned scrolling view. I’m trying to limit its size to remain within its parent container, but it seems that its contents, although clipped, are causing the parent container to grow well off of the screen.

I’ve tried a variety of combinations of nesting containers, limiting sizes to varying amounts, etc.

One observation is that this only happens if I set the scrolling view to have a percentage max-width. If I specify a number of pixels, then it works as I would expect. This indicates to me that the layout size is calculated before the clipping of the scroll view occurs. I was hoping that the intermediate container (commented in the code) would help to fix that.

Similarly, if I change the scrolling view to have a much smaller percentage max-width (say, 10%), that div does indeed become smaller, but, bizarrely, the parent containers still behave as though the full width was present.

In short, a max-width set in pixels causes the parents to size as I would expect, but has unintuitive results when it’s set to any percentage.

So, am I misunderstanding something about the concept of percent widths? Or perhaps there’s a simple CSS attribute that will resolve this?

Tags:

2

Answers


  1. 0

    enter image description here

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .fullscreen { 
            display: flex;
            width: 100%; 
            height: 100%; 
            position: absolute; 
            top: 0; 
            left: 0; 
            margin: 0; 
            padding: 8px; /* Adjusted to include the padding in fullscreen */
            box-sizing: border-box; /* Ensures padding is included in the width/height */
        }
        .border { 
            border: solid black 4px; 
            padding: 8px; 
            box-sizing: border-box; 
        }
        .menuitem { 
            display: inline-block; 
            width: 300px; 
            height: 300px; 
            border: solid blue 1px; 
            margin: 8px; 
        }
        .left-menu {
            min-width: 100px; 
            margin-right: 8px; 
        }
        .right-content {
            flex-grow: 1; 
            display: flex;
            flex-direction: column;
        }
        .scrolling-view {
            flex-grow: 1;
            white-space: nowrap; 
            overflow-x: auto; 
        }
    </style>
</head>
<body>
    <div class="fullscreen"> <!-- full screen container-->
        <div class="left-menu border"></div> <!-- left menu -->
        <div class="right-content border"> <!-- right content container, grows to fill remaining space -->
            <div class="scrolling-view border"> <!-- horizontally scrolling view -->
                <!-- arbitrary contents of the scrolling view -->
                <div class="menuitem"></div>
                <div class="menuitem"></div>
                <div class="menuitem"></div>
                <div class="menuitem"></div>
                <div class="menuitem"></div>
            </div>
        </div>
    </div>
</body>
</html>

    Try this code bro!

    Login or Signup to reply.
  2. 0

    Check Out This Screenshot

    If you are trying to get result according to upper screenshot then apply this to container present below <!-- right content container, grows to fill remaining space -->

    div.border { 
    width: 85vw;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search