Usage of the flex-basis Property

HTML-CSS
1

Tell us what’s happening:

For this lesson, why do the boxes only shrink but not grow?

I gather that the shrink happens when the view size is less than 30em, but why do the boxes not grow when the view is stretched past 30em?

Also, why do the red and blue box start shrinking at the same time? Why doesn’t the red box shrink first when it is no longer at 20em, and then the blue box shrink only once it is smaller than 10em?

Your code so far


<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  
  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis: 10em;
  }
  
  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis: 20em;
  }
</style>
  
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
(lol I apparently I can’t use links yet even tho this is boilerplate stuff)

2

By default, the flex value for a flex item is flex: 0 1 auto, so they shrink but don’t grow.
As for the simultaneos shrinking, when flex items have to shrink, flex basis is taken into account, so it’s kind of relative to their original size.

I recommend you reading about this on MDN, it helped me a lot: