How to make flexbox child's height to fit to content instead of 100% height of its container

fit-content is limited in support; IE won't ever support it, and Firefox still requires a prefix. This solution has jQuery for demo purposes only and is not required for the solution. There are four choices:

  1. NONE: No extra styles on .A
  2. FIT-CONTENT: Adds the CSS property fit-content on .A
  3. MAX-CONTENT: Adds the CSS property max-content on .A
  4. TABLE: Adds the CSS property display:table on .A

Option 2 and 3 behave identically , so in conclusion the simplest solution is to apply display:table and it's incredibly compatible as it is simple. height: fit-content and max-content is almost as compatible with one minor caveat being that IE does not support it (IE is going the way of the dinosaur so it's pretty much a non issue).

Demo

$('.rad').on('change', switchStyle);

function switchStyle(e) {
  var pick = $(this).val();
  switch (pick) {
    case 'nil':
      $('.A').removeClass('fit max tab');
      break;
    case 'fit':
      $('.A').addClass('fit').removeClass('max tab');
      break;
    case 'max':
      $('.A').addClass('max').removeClass('fit tab');
      break;      
    case 'tab':
      $('.A').addClass('tab').removeClass('fit max');
      break;
    default:
      break;
  }
}
.box {
  display: flex;
  height: 300px;
  background: #333;
}
.A {
  width: 30%;
  background: #3cf;
}
.B {
  width: 30%;
  background: #3fc;
}
.C {
  width: 40%;
  background: #cf3;
}
.A1 {
  width: 100%;
  background: #fc3;
}
pre {
  margin: 0px;
}
.set {
  position: relative;
  z-index: 1;
  bottom: 300px;
  left: 30%;
  width: 30ch;
  font: 400 16px/1.428 Verdana;
}
.A.fit {
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: -fit-content;
}
.A.max {
  height: max-content;
}
.A.tab {
  display: table;
}
<div class="box">
  <div class="A">
    <div class="A1"><pre>
    CONTENT
    CONTENT
    CONTENT
    CONTENT</pre>
    </div>
  </div>
  <div class="B"></div>
  <div class="C"></div>
</div>

<fieldset class='set'>
  <label>NONE
    <input class='rad' name='rad' type='radio' value='nil' checked>
  </label>
  <label>FIT-CONTENT
    <input class='rad' name='rad' type='radio' value='fit'>
  </label><br>
  <label>MAX-CONTENT
    <input class='rad' name='rad' type='radio' value='max'>
  </label>  
  <label>TABLE
    <input class='rad' name='rad' type='radio' value='tab'>
  </label>
</fieldset>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


Using of experimental values of the height CSS property is generally discouraged.

If it is individual flexbox child which you want to fill the height according to its content, use align-self: baseline; for it (see the example). If it is all the children, put align-items: baseline; into the parent container.

#container {
  display: flex;
  height: 300px;
  background: #333;
}

#child1 {
  width: 30%;
  background: #3cf;
  align-self: baseline;
}

#child2 {
  width: 30%;
  background: #3fc;
}

#child3 {
  width: 40%;
  background: #cf3;
}

#child1_child {
  width: 100%;
  background: #fc3;
}

pre {
  margin: 0;
}
    <div id="container">
    <div id="child1"><div id="child1_child"><pre>CONTENT<BR>CONTENT<BR>CONTENT<BR>CONTENT</pre></div></div>
    <div id="child2"></div>
    <div id="child3"></div>
    </div>

Tags:

Css

Flexbox

Recent Posts