flex-box - shrinking to allow for more content

shrinking to allow for more content

by jonahe

HTML

<div id="parent">
  <div id="prio_2">prio 2 - 120px or smaller if needed</div>
  <div id="prio_1">
    <b> prio 1</b>
    <ul>
      <li>Add more items to see the other divs give up space </li>
      <li><a target="_blank" href="https://jsfiddle.net/jonahe/hnahu70q/">Also see this fiddle</a></li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div id="random">random - 120px or smaller if needed (but slower to shrink than prio 2, because of lower flex-shrink value)</div>
</div>

CSS

#parent {
  display: flex;
  flex-direction: column;
  height:300px;
}

#prio_2 {
  display: flex;
  flex-direction: column;
  flex-basis: 120px;
  flex-shrink: 3;
  flex-grow: 1;
  background: lightblue;
}

#prio_1 {
  display: flex;
  flex-direction: column;
  /* below is same as
     flex-basis: auto;
     flex-grow: 1;
     flex-shrink: 0; 
  */
  flex: 1 0 auto;
  background: pink;
}
textarea, input {
  background: pink;
}
#random {
  display: flex;
  flex-direction: column;
  flex-basis: 120px;
  flex-shrink: 2;
  background: wheat;
}