flex 1 1 auto doesnt divide all available space evenly

August 3, 2022

Why is these labels don’t share the extra space equally (divide the all available space evenly). Despite having flex: 1 1 auto.

body {
  padding: 0;
  margin: 0;
}

.wrap {
position: absolute;
width: 100%;
height: 100%;
}

group {
 display: flex;
 flex-flow: row wrap;
}

group div {
background: gray;
  flex: 1 1 auto;
}

label {
  padding: 0.2em;
  display: flex;
  justify-content: center;
}

label.red {
  background: red;
}

<div class='wrap'>
  <group>
  <div>
    <label>Label 1</label>
  </div>
  <div>
    <label class='red'>Label 2</label>
  </div>
  </group>
    <group>
  <div>
    <label class='red'>Short 1</label>
  </div>
  <div>
    <label>Longer 2</label>
  </div>
  </group>
      <group>
  <div>
    <label>Triple 1</label>
  </div>
  <div>
    <label class='red'>Triple 2</label>
  </div>
    <div>
    <label>T3</label>
  </div>
  </group>
</div>

>Solution :

Per MDN:

flex: auto

The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "flex: 1 1 auto".

Meaning – flex: 1 1 auto or flex: auto sizes the elements according to their height and width properties. Because there is no specified height and width, it will grow to absorb free space in the container based on each child’s content. You’ll notice if you remove all text in your markup, it works as expected. This would be the same if there were widths and heights on the flex children.

Solution – use flex: 1; or flex: 1 1 0 instead. These two are equivalent to each other. This means:

flex-grow: 1; ➜ The div will grow in the same proportion as the window-size

flex-shrink: 1; ➜ The div will shrink in the same proportion as the window-size

flex-basis: 0; ➜ The div does not have a starting value as such and will
take up the screen as per the screen size available for
e.g: – if 3 divs are in the wrapper then each div will take 33%.

body {
  padding: 0;
  margin: 0;
}

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
}

group {
  display: flex;
  flex-flow: row wrap;
}

group div {
  background: gray;
  flex: 1;
}

label {
  padding: 0.2em;
  display: flex;
  justify-content: center;
}

label.red {
  background: red;
}

<div class='wrap'>
  <group>
    <div>
      <label>Label 1</label>
    </div>
    <div>
      <label class='red'>Label 2</label>
    </div>
  </group>
  <group>
    <div>
      <label class='red'>Short 1</label>
    </div>
    <div>
      <label>Longer 2</label>
    </div>
  </group>
  <group>
    <div>
      <label>Triple 1</label>
    </div>
    <div>
      <label class='red'>Triple 2</label>
    </div>
    <div>
      <label>T3</label>
    </div>
  </group>
</div>