overflow of a flex a grid child

by

I have an issue with a grid layout. is a grid container (works fine) with one column on the side spanning 15% of the parent, and a main taking the remaining space. You can see that all elements are well within their frame, max-width and max-height. YET the nav bar has a scrollbar, it overflows, and you can see the scrollbar is active unlike that of the main part.
The overflow happens only above a certain window size. My screen is 1366×768 but I don’t need a full-screen to get it.
A sample here
Thanks for your help

body{
    place-content:center;
    max-height: 29.7cm;
    max-width: 30cm;
    height:100vh;
    margin: auto;
    display: grid;
    grid-template-columns: 15% 1fr%;
        }

body>nav{
    display:flex;
    flex-direction:column;
    position:relative;
    font-size: clamp(13px,2vw,17px);
    line-height: 1.1;
    > .button.last {margin-top:auto}}

The overflow shouldn’t be there…
I tried min-height:0, max-height:inherit or 100vh, box-sizing:border-box, everything I could to make it disappear, and nope. It’s like the navbar’s content is made bigger than the element by a few milimeters whatever the later’s size actually is, even far from the viewport’s limits.

  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn’t work can I just paste a link.

    – 

The issue seems to be in the fact that you put

body > * {
 overflow-y: scroll;
 overflow-wrap: break-word;
}

Because you use this to crop the items it will put scrollbars on the elements because, well you said it should as the code says. When I removed those two properties the scrollbars went away but since there is no decent width on the other elements it was stretched out left to right showing only the middle paragraph

I recommend making a div with either flex or grid and try to position the elements that way.

Haven’t fixed it myself or I would give you the full code but I hope I’ve sent you in the right direction.

Regards,
Bobbie

Leave a Comment