<h1>Cheatsheet</h1>
https://cssreference.io/property/flex-shrink/
<p>
  0 - false<br/>
  flex-grow: 0, it won't grow, just the width as it is<br/>
  flex-shrink: 0, it won't shrink, won't wrap
</p>
<p>
  1 - normal size
</p>
<p>
  2 - start to do the job that you claimed to<br/>
  flex-grow: start to grow<br/>
  flex-shrink: start to shink<br/>
  they are relative value
</p>
<p>IE default grow and shrink value: 0<br/>
 Chrome default grow and shrink value: 1</p>
</p>
<h1> One Column has fixed width, and others are still responsive</h1>
<div class='parent'>
  <div class='child-1-fix'>
    <h2>responsive width - 30%, then fix width on tablet</h2>
    <p>quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima</p>
  </div>
  <div class='child-2-fix'>
    <h2>responsive width - 70%, then depends on the the fix width on the left</h2>
    <p>quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima</p>
  </div>
</div>

<h1> All Columns have fixed width</h1>
<div class='parent-tablet'>
  <div class='child-1-fix-tablet'>
    <h2>responsive width, then fix width on tablet</h2>
    <p>quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima</p>
  </div>
  <div class='child-2-fix-tablet'>
    <h2>responsive width, then depends on the the fix width on tablet</h2>
    <p>quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima</p>
  </div>
    <div class='child-3-fix-tablet'>
    <h2>responsive width, then depends on the the fix width on tablet</h2>
    <p>quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima</p>
  </div>
</div>

<h1> flex-shrink exmaple</h1>
<div class='parent-shrink'>
  <div class='child-shrink-1'>
      column 1
   </div>
   <div class='child-shrink-2'>
      column 2
   </div>
    <div class='child-shrink-3'>
      column 3
   </div>
</div>

.parent{
  display: flex;
  border: solid 1px red;
  width:100%;
  flex-wrap: nowrap;
}
[class*="child-"]{
  padding: 1rem;
  
}
.child-1-fix{
  flex-basis: 30%;
  @media only screen and (max-width: 1023px){
    flex-basis:250px;
    flex-grow: 1; //neither grow nor shrink
    flex: 0 0 250px;
  }
}
.child-2-fix{
  flex-basis: 70%;
  @media only screen and (max-width: 1023px){
    flex-shrink: 2;//shrink if possible
    flex: 1 1 70%;
  }
}
.parent-tablet{
  display: flex;
  width: 100%;
  overflow: scroll;
  border: 1px solid yellow;
}
[class*="-fix-tablet"]{
  //it really doesn't matter how the flex-basis is set
  //flex box is smart enough to make columns as same width
  flex: 1 1 auto; 
  @media only screen and (max-width: 1023px){
    flex: 0 0 500px;
  }
 }

.parent-shrink{
  display: flex;
  border: 1px solid black;
}
[class*="child-shrink-"]{
  flex: 1 1 auto;
}
.child-shrink-1{
  flex: 1 0 120%;
}