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:
- NONE: No extra styles on
.A
- FIT-CONTENT: Adds the CSS property
fit-content
on.A
- MAX-CONTENT: Adds the CSS property
max-content
on.A
- 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 flex
box 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>