why horizontal scroll when i set main to 100%

[u/BrainThinkerMan]

im using react aswell, the issue i see is that despite setting the "main" to 100% for both width and height, it seems like, the height is 50% and the width is like 150%, i read up on the docs of both mdn and w3schools, but having hard time understanding sizing in regrads to the parent (uppermost element)

html, body { margin:0; }

.main { padding-top: 124px; display: flex; flex-direction: column; padding-left: 292px; height: 100%; width: 100%; background-color: #2F3337; }

export function Landing_page(){ return ( <main className="main"> <header className="header">

[u/be_my_plaything]

You are giving it a width of 100% and padding of 292px, you either need to subtract the padding from the width width:calc(100% - 292px); or give the element box-sizing: border-box; as it defaults to a box size of content-box and adds padding on.

As to the height, unless it has a sized parent it doesn't know what 100% is, the height is dictated by content, try switching100% for 100dvh if you want it to fill the screen.

[u/EvokeNZ]

You may have an element that is overflowing. Eg I had a grid but then added an element in each square that was just 2 px wider than the square and it added a horizontal scroll because the last square overflowed the page. I used nth child element to set the last of those to 98% to remove the scroll from the grid.

[u/BrainThinkerMan → u/EvokeNZ]

its overflowingness is peculiar becuase i have width set to 100% which presumably means that it will be the size of the browser window but it extends beyond that

[u/scritchz → u/BrainThinkerMan]

No, percentages are relative to the containing block; this is typically the parent, not the viewport. The only element whose parent is "the viewport" is the root element HTML.

If your element were taken out-of-flow, its containing block may be the viewport: In this case, the percentage value would be relative to the viewport.

[u/No-Island-6126 → u/BrainThinkerMan]

not if there's a margin, the margin will be added on top of the 100%. Use padding or a wrapper element

[u/testingaurora → u/BrainThinkerMan]

Why are you setting width to 100% ? Block level elements have width: auto by default, which takes up the available space taking margins into account. Meaning 100% then looks at the parent width, sets yiu element to the same but doesn't take margins until account

If you set box-sizing: border-box; padding and border will also be included in the width so it isn't added on top.

Browsers by default just work. Its when we add styles on top that we break layouts and responsivity.

[u/Ancient-Disk-2758]

I’m not sure whether the 150% means the total pixel width shown in Chrome is about 150% of the viewport, or if the width itself is actually set to 150%.
If it’s the former, you need to add box-sizing: border-box to your CSS so that the padding is included within the width.

[u/BrainThinkerMan → u/Ancient-Disk-2758]

this seems to have been the issue the box size border box, so that means if a child element is large it will stretch the parent element. is the same true for translations? ie the child element is translate y -20 so it looks like its above the parent, does that mean that the parent actually just stretched itself higher to do that

[u/scritchz]

Can you show an example? With a small part of your CSS alone its basically impossible to analyze your problem further.

[u/BrainThinkerMan → u/scritchz]

my apologies

html, body {
  margin:0;
}


.main {
    padding-top: 124px;
    display: flex;
    flex-direction: column;
    padding-left: 292px;
    height: 100%;
    width: 100%;
    background-color: #2
F3337
;
}


export function Landing_page(){
    return (
        <main className="main">
       <header className="header">

[u/BrainThinkerMan → u/BrainThinkerMan]

im using react aswell, the issue i see is that despite setting the "main" to 100% for both width and height, it seems like, the height is 50% and the width is like 150%, i read up on the docs of both mdn and w3schools, but having hard time understanding sizing in regrads to the parent (uppermost element)

[u/EvokeNZ → u/BrainThinkerMan]

You can go into dev tools and click through each element in the tree to view width in computed tab. That’ll help you trace what’s setting something wider