Fixed width column with nested flex

Question

I am new to flexbox.I need to display dynamic rows and all my columns should be aligned vertically.In the below example all my red boxes should be the same width.Can someone review the below code and let me know what am i missing?

.vc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container {
  display: flex;
}

.red {
  background: orangered;
  display: flex;
  flex-direction: row;
}

.green {
  background: yellowgreen;
}

.blue {
  background: steelblue;
}

.container div {
  font-size: 5vw;
  padding: .5em;
  color: white;
  flex: 1;
}

<div class="vc">
  <div class="container">
    <div class="red">1
      <div class="green">1a</div>
      <div class="blue">1b080808098080</div>
    </div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
  <div class="container">
    <div class="red">1
      <div class="green">1a</div>
      <div class="blue">1b080808</div>
    </div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
</div>

missing `align-items: center;` to in the flex container ...and why the red should be the same width ? i don't see any property set for this — Temani Afif, Apr 17 '18 at 22:44
@TemaniAfif, which property do I need to set to make red blue and green boxes as the same width and need to look like columns? — user3579341, Apr 17 '18 at 22:51
if you will be using different container the only way is to set specific width/flex basis ... or use CSS-grid instead, or table layout — Temani Afif, Apr 17 '18 at 22:53

score 0 · Answer 1 · answered Apr 18 '18 at 08:37

Try this:


    .vc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .container {
      display: flex;
    }

    .red {
      background: orangered;
      display: flex;
      flex-direction: row;
      width: 50%; /*or any other*/
    }

    .green {
      background: yellowgreen;
    }

    .blue {
      background: steelblue;

    }

    .container div {
      font-size: 5vw;
      padding: .5em;
      color: white;
      flex: 1 1 auto;
    }

This resolve your issue, but I think flexbox is not the correct solution 'cause it works well only in one direction and not in 2 directions (rows and columns) as you want. Consider using CSS-grid instead.

Thanks for the reply.I found the solution here https://stackoverflow.com/questions/44778298/make-flex-items-have-equal-width-in-a-row — user3579341, Apr 19 '18 at 14:04

Fixed width column with nested flex

1 Answers1