How to disallow child element being expanded out of parent element in grid layout

Question

I have grid layout with two inner elements, I want second element(bbbb row) should be limited by (aaaaa row)

<style>

#container {
    display: grid;
    width: 90%;
    justify-content: center;
    background: green;
    display: grid;
    grid-auto-flow: row;
}
#inner {
    display: grid;
    width: 100%;
    background: red;
}
#inner2 {
    display: grid;
    width: 100%;
    background: yellow;
}
</style>


<div id="container">
    <div id="inner">aaaaaaaaa</div>
    <div id="inner2">bbbbbbbbbbbbbbbb</div>
</div>

so, this is how it looks like now bad and how it should be(part of bbb is hidden) good

@Paulie_D Don't see how this is a duplicate that question is about Flexbox and this specifically asks for a CSS Grid solution — Rainbow, May 22 '21 at 18:35
The same issue applies to CSS-Grid as well as flexbox hence the title of the duplicate question. Whilst that actual *question/ specifically refer to flexbox, it applies to CSS-Grid also. — Paulie_D, May 22 '21 at 18:44
@Paulie_D we needed the duplicate for the row direction, not the column one — Temani Afif, May 22 '21 at 19:36

Rainbow · Answer 1 · 2021-05-22T18:09:32.103

-1

You can try this

#container {
  display: grid;
  width: 90%;
  justify-content: center;
  background: green;
  display: grid;
  grid-auto-flow: row;
}

#inner {
  display: grid;
  width: 100%;
  background: red;
}

#inner2 {
  display: grid;
  background: yellow;
  /* New */
  width: 0;
  padding-right: 100%;
  overflow: auto;
}

<div id="container">
  <div id="inner">aaaaaaaaa</div>
  <div id="inner2">abcdefhijklmnopqrst</div>
</div>

Explanation:

width: 0; To lose the content defined width

padding-right: 100%; percentage on the padding is calculated from the parent's width, in this case it's the invisible grid column which is defined by the first element.

overflow: auto; hide the overflow, not sure how you want to deal with it so.

edited May 22 '21 at 18:09

answered May 22 '21 at 18:02

Rainbow

6,772
3
11
28

yep, that works, thank you! – Alex Myth May 22 '21 at 18:27
@MikitaShautsou don't use padding-right:100%, use min-width:100% combined with width:0 (I have added a better duplicate) – Temani Afif May 22 '21 at 19:37
@MikitaShautsou here is why you should not be using padding: https://jsfiddle.net/61eqmug7/ – Temani Afif May 22 '21 at 19:44
@TemaniAfif woah that's weird, i've never seen that before, Why does it behave like that ? I think i get it, it's because of how white space is handled which can be overridden by `white-space: nowrap;` but then we'd have extra space on the right – Rainbow May 22 '21 at 20:18
@ZohirSalak you are using padding that is covering the whole area, there is 0 width for the content so it will wrap as soon as possible and will overflow on the padding area. – Temani Afif May 22 '21 at 20:49
@TemaniAfif Oh i see that makes sense, Doesn't explain why we have extra space on the right side when you'd use `white-space: nowrap;` the content overflow the padding area then it shouldn't be added to it. Right ? – Rainbow May 22 '21 at 21:12
I don't any extra space on my side when using white-space:nowrap – Temani Afif May 22 '21 at 21:14

How to disallow child element being expanded out of parent element in grid layout

1 Answers1