More flex-box, flex-shrink

More flex-box, flex-shrink

by jonahe

HTML

<div id="grand-parent">
  <div id="parent">
    <div class="shrinkable medium-shrink">Shrinkable (MEDIUM)</div>
    <div id="dominant">
     <textarea rows="4" cols="50">Resize me to watch the divs shrink</textarea>
    </div>
    <div class="shrinkable low-shrink">Shrinkable (LOW)</div>
    <div class="shrinkable high-shrink">Shrinkable (HIGH) - highest flex-shrink value</div>
  </div>
</div>

CSS

#grand-parent {
  height: 95vh; /* almost 100% of the jsfiddle iframe */
}
 
#parent {
  display: flex;
  flex-direction: column;
  /* important for parent to have fixed height! */
  height: 100%; /* almost 100% of the jsfiddle iframe */
}
#dominant {
  display: flex;
  flex: 1 0 auto; /* grow, shrink, basis */
  min-height: 23vh; /* use roughly one fourth of full height */
  max-height: calc(95vh - 70px);
  
  background: pink;
}

.shrinkable {
  display: flex;
  flex-basis: 23vh; /* use roughly one fourth of full height */
  min-height: 20px;
  align-items: center;
}

.low-shrink {
  flex-shrink: 0.5;
  background: lightgray;
}

.medium-shrink {
  flex-shrink: 1;
  background: wheat;
}
.high-shrink {
  flex-shrink: 10;
  background: lightblue;
}





textarea, input {
  background: pink;
  margin: 15px;
  text-align: center;
}

div {
  border: 1px solid white;
  justify-content: center;
}