Geek Answers Handbook

How to make flexbox child size suitable for content instead of 100% height of its container

#container { display:flex; height:300px; background:#333; } #child1 { width:30%; background:#3cf; } #child2 { width:30%; background:#3fc; } #child3 { width:40%; background:#cf3; } #child1_child { width:100%; background:#fc3; } pre { margin:0px; } 
  <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>

The height of #child1 automatically set to the same height of #container , how can I make it more suitable for #child1_child , rather than 100% of the height of #container ?

The height of #child1_child not static, it can be changed using the contents inside it, the height of #child1 with a static value is useless.

+6
source share
2 answers

UPDATE

TranslucentCloud indicated that fit-content limited in support. This update has jQuery only for demo purposes and is not required for a solution. Almost a year passed, and I learned something. There are 3 options:

  • NO: No extra styles on #child1
  • FIT-CONTENT: Adds CSS fit-content property to #child1
  • TABLE: Adds CSS display:table property to #child1

Options 2 and 3 behave the same, so the simplest solution is to use display:table and FTW, which is incredibly compatible *, because it's simple.

* Do not add add-ons or fields to #child1 if you want to support Safari 5.1.17 , which is an obsolete browser for 5 years, 5 versions and 1 new engine, it is probably safe to assume that there is no longer a problem.

OLD

Try adding the following to child1 :

  height:-moz-fit-content; height:-webkit-fit-content; height:fit-content;

SNIPPET

 $('.rad').on('change', switchStyle); function switchStyle(e) { var pick = $(this).val(); switch (pick) { case 'nil': $('#child1').removeClass('fit tab'); break; case 'fit': $('#child1').removeClass('tab').addClass('fit'); break; case 'tab': $('#child1').addClass('tab').removeClass('fit'); break; default: break; } } 
 #container { display: flex; height: 300px; background: #333; } #child1 { width: 30%; background: #3cf; } #child2 { width: 30%; background: #3fc; } #child3 { width: 40%; background: #cf3; } #child1_child { width: 100%; background: #fc3; } pre { margin: 0px; } #set { position: relative; z-index: 1; bottom: 75px; left: 30%; width: 30ch; font: 400 16px/1.428 Verdana; } #child1.fit { height: -moz-fit-content; height: -webkit-fit-content; height: -fit-content; } #child1.tab { display: table; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="child1"> <div id="child1_child"><pre> CONTENT CONTENT CONTENT CONTENT</pre> </div> </div> <div id="child2"></div> <div id="child3"></div> </div> <fieldset id='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> <label>TABLE <input class='rad' name='rad' type='radio' value='tab'> </label> </fieldset>
+2
source

The experimental values ​​for the CSS height property are not Flexbox.

If this is a separate flex element that you want to fill with height according to its contents, use align-self: baseline; (see example). If these are all children, put align-items: baseline; to 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>
+1
source

More articles:


All Articles