CSS Flexbox inside Grid. Parent not getting full width

Question

In my flexbox inside a grid in CSS, the parent (grid) is not getting the full width of its children on the second column. The problem may be related to the "grid-template-columns", but I can't find a solution.

https://codepen.io/francisbbelisle/pen/poaeaZQ

Goal: https://postimg.cc/svsQQ8z8 Problem: https://postimg.cc/f3fTNWtR

$spacing: 4rem;

body {
  background-color: #353535;
  overflow-x: hidden;
  text-size-adjust: 100%;
 }

.cat {
  background-color: #222;
  padding: 0;
  height: 100vh;

  h2 {
    font-size: 3em;
    text-align: center;
  }
  
  h3 { font-size: 1.5em }

  p { font-size: .75em }

  span {
    font-weight: bold;
    text-align: right;
    float: right;
    margin-left: 2em;
  }

  .wrapper {
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto auto;
    overflow-x: scroll;

    div {
        margin: $spacing;
        padding: $spacing;
        background-color: #ffffff;
        display: flex;
        max-height: calc(100vh - #{$spacing}*4 );
        column-gap: $spacing;
        flex-direction: column;
        flex-wrap: wrap;
    }

    ul {padding: 0}
    li { width: 33vw; list-style-type: none; }

  }

}

<section class="cat">
      <div class="wrapper">
            <div>
              <h2>Menu 1</h2>
              <h3>Cat 1</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>

              <h3>Cat 2</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>
            </div>
        
            <div>
              <h2>Menu 2</h2>
              <h3>Cat 1</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>

              <h3>Cat 2</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>
            </div>
        
      </div>
    </section>

EDIT 2022-05-18 I have simplified my code. Column and gap need a fixed width. The flex width need to be the same of his content. The page need to be scrollable to see it. I have the same problem with "columns: auto 200px".

https://codepen.io/francisbbelisle/pen/vYdmxVw

Screen capture: https://postimg.cc/zLmwGsrM

Can you clarify which element is the target? it looks like the only flex element the div insider the .wrapper which is the only grid element. So theres no grid with a flex parent — Yftach, May 18 '22 at 00:00
The better question is what are you even trying to do? Whats the desired outcome? — Yftach, May 18 '22 at 00:02
Hope this will help: https://postimg.cc/svsQQ8z8 Sorry if my code isn't clear. It's a simply version from a complet website. — Francis B. Bélisle, May 18 '22 at 00:25

Brett Donald · Answer 1 · 2022-05-18T04:27:51.903

You need to draw us a picture of how you want it to look, then we can help you get there.

Note that in your code, the flexboxes are inside the grid, not the other way around.

I have come up with the sample below ... is this getting closer to what you want?

body {
  background-color: #353535;
  overflow-x: hidden;
  text-size-adjust: 100%;
  margin: 0;
}

.cat {
  background-color: #222;
  padding: 0;
  height: 100vh;
}
.cat h2 {
  font-size: 3em;
  margin-top: 0;
}
.cat h3 {
  font-size: 1.5em;
}
.cat p {
  font-size: 0.75em;
}
.cat span {
  font-weight: bold;
  text-align: right;
  float: right;
  margin-left: 2em;
}
.cat .wrapper {
  padding: 2em;
  display: grid;
  grid-template-columns: 2fr 1fr;
  overflow-x: scroll;
  border: 3px solid yellow;
  gap: 2em;
}
.cat .wrapper>div {
  padding: 2rem;
  background-color: #ffffff;
  border: 3px solid red;
}
.cat .wrapper ul {
  padding: 0;
}
.cat .wrapper li {
  list-style-type: none;
}
.columns {
  columns: 2;
  gap: 2em;
}

<section class="cat">
      <div class="wrapper">
            <div>
              <div class="columns">
                <h2>Menu 1</h2>
                <h3>Cat 1</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>

                <h3>Cat 2</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>

                <h3>Cat 3</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>
              </div>
            </div>
        
            <div>
              <div class="no-columns">
                <h2>Menu 2</h2>
                <h3>Cat 1</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>

              </div>
            </div>
        
      </div>
    </section>

Thanks Brett for your answer. This is what I try to achieved: https://postimg.cc/svsQQ8z8 The problem is the second column: https://postimg.cc/f3fTNWtR — Francis B. Bélisle, May 18 '22 at 00:31
Your codepen shows case 2 - can you describe how case 1 differs? — Christian, May 18 '22 at 00:46
Okay, I have edited the snippet. For what you are doing, the CSS columns properties will work much better than flexbox. https://www.w3schools.com/css/css3_multiple_columns.asp — Brett Donald, May 18 '22 at 00:55
There is a way that the number of columns is design responsive depending of the length of the content? — Francis B. Bélisle, May 18 '22 at 01:07
Yes, Francis, you can set either the number of columns, or set the width and it will calculate how many cam fit. — Brett Donald, May 18 '22 at 01:08
Thanks Brett, I will try that on the full website. I'll keep you informed. — Francis B. Bélisle, May 18 '22 at 01:13
Unfortunately, I still have the same problem with column. https://codepen.io/francisbbelisle/pen/zYRZjma column-count is set to auto with a column-width — Francis B. Bélisle, May 18 '22 at 03:58
I have adjusted my snippet again. Note that in my code I have not fixed any widths or heights. What do you not like about the code or behaviour of my snippet? — Brett Donald, May 18 '22 at 04:30
"columns: 2" I don't want always 2 columns. the number of columns need to be design responsive. The height of "cat" is set to 100vh and depending of the content, it's share across multiple column. — Francis B. Bélisle, May 18 '22 at 13:32
So your design uses "columns" in two ways. First, there are a number of menus (currently two) and we're using a CSS grid with two columns to manage the overall layout. Second, some menus are longer than others, so we're using CSS columns to manage the layout within each menu. Are you saying that you want a design which copes with both a variable number of menus, and a variable number of columns within each menu? And when it all gets too wide for the screen, you want the whole lot to scroll horizontally rather than vertically? — Brett Donald, May 18 '22 at 22:00
Basically, All "Menu" is always scrollable horizontally. Inside each "Menu", everything is design responsive depending of the screen height. So column, after row when the column is full. I've just updated my question. I think the problem is more simple then that. — Francis B. Bélisle, May 19 '22 at 00:43

CSS Flexbox inside Grid. Parent not getting full width

1 Answers1