CSS3 flexboxes: flex-basis auto

Comparison of flex-basis auto vs flex-basis 0.

by jakub_g

HTML

<div class="container">
  <div class="child one">
    Child One.<br><br>Lorem ipsum.<br><br>Dolor sit amet.<br><br>This is a bit longer line.
  </div>
  
  <div class="child two">
    Two.<br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

CSS

div {  border: 3px solid; }
.child {
  padding:10px;  margin:10px;
  background-color:#eee;
}
.container {
  padding: 10px;
  background-color:yellow;
  display: flex;
}

.child.one {
  flex: 2 1 auto;
  color: green;
}

.child.two {
  flex: 1 5 auto;
  color: purple;
}

JavaScript

// flex-basis is calculated automatically for each item
// in case of text-only items -- based on the longest line of the text

// actual width is then dependent also on the flex-grow and flex-shrink.

// to understand how this works, try first to resize the bottom-right container to the 'equilibrium state' so that the two items have the texts inside them not wrapped into new lines.

// then, try growing (left container resizes 2x faster) / shrinking (right item shrinks 5x faster).


// Change flex-basis from auto to 0 in both children to see the difference between them.

// If flex-basis is auto, then the first item will take *twice as much remaining space* than the first one.
// Initially, each of the children will try to expand *as much as it can*. (to fit the longest paragraph in one line).

// If flex-basis is 0, then the first item will be *exactly twice as long* as the first one if there's enough minimum space to lay their internal contents (if the flex container is extremely narrow the children will be shrinked and this will not hold).
// Initially, each of the children will expand *minimally that it needs* (to fit the longest word in one line).