How to use flex to have proportional columns?

Question

I'm learning flexbox.

I'm trying to make elements on a single row that are proportionally sized with a fixed 1:2 ratio.

.cell {
  padding: 8px 16px;
}

.cell > div {
  height: 30px;
}

.row {
  display: flex;
}

<div class="row">
   <div class="cell" style="flex: 1"><div style="background: red"></div></div>
   <div class="cell" style="flex: 1"><div style="background: blue"></div></div>
   <div class="cell" style="flex: 1"><div style="background: yellow"></div></div>
</div>
<div class="row">
   <div class="cell" style="flex: 1"><div style="background: green"></div></div>
   <div class="cell" style="flex: 2"><div style="background: purple"></div></div>
</div>

Why doesn't the flex property achieve this?

Can this be achieved with flexbox? (It could be achieved via other means, but I'm learning how flexbox works.)

Where are you testing it ? its working fine for me. Do you want to align the top 2 (blue and yellow) divs with the purple one ? — Nandita Sharma, Jul 11 '18 at 14:05
@NanditaAroraSharma, yes, they should be aligned. The top three are evenly proportioned 1:1:1 for scale. The bottom two are not proportioned 1:2. (Not the colored boxes....the actual flex child divs which pad the colored boxes.) — Paul Draper, Jul 11 '18 at 14:43

Nandita Sharma · Answer 1 · 2018-07-12T04:58:17.080

Remove the padding from .cell and add margin in the div inside cell (.cell>div)

.cell>div {
  height: 30px;
  margin: 8px 16px;
}

.cell>div {
  height: 30px;
  margin: 8px 16px;
}

.row {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
}

<div class="row">
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: red"></div>
  </div>
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: blue"></div>
  </div>
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: yellow"></div>
  </div>
</div>
<div class="row">
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: green"></div>
  </div>
  <div class="cell" style="flex-grow: 2;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: purple"></div>
  </div>
</div>

https://stackoverflow.com/questions/32239549/flex-property-not-working-in-ie Refer this link may be this is the issue you are facing — Nandita Sharma, Jul 12 '18 at 05:08

How to use flex to have proportional columns?

1 Answers1