How to Stretch Flex Child to Fill Height of the Container

How to stretch flex child to fill height of the container?

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
    some<br> cool<br> text
  </div>
</div>

How can I make Flexbox children 100% height of their parent?

Use `align-items: stretch`

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

Make children full height of parent flex box css

Do these 3 things for .child:

Remove height: 100%
Remove align-items: stretch
Use flex-grow: 1

And remove align-items: stretch; and flex-direction:row; from .parent too.

.parent {
  display: flex;
  /* flex-direction: row; */
  border: thin solid orange;
  margin: 5px;
  padding: 5px;
  /* align-items: stretch; */
}

.child {
  display: flex;
  /*  height: 100%; */
  
  flex-grow: 1; /* NEW */
  
  width: 25%;
  /*  align-self: stretch; */
}

.child.blue {
  background: blue;
}

.child.red {
  background: red;
}

.child.yellow {
  background: yellow;
}

.child.green {
  background: green;
}

<div class="parent">
  <div class="child green">
    <p>
      this is some content
    </p>
  </div>
  <div class="child blue">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child red">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child yellow">
    <p>
      this is some content
    </p>
  </div>
</div>

CSS: How to make div fill remaining height inside of a flex-child

It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.

Html:

<div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
   </div>
</div>

CSS:

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    flex-grow: 1;
    background-color: lightblue;
 }

If you need additional help please provide more code.

Flex Child Height not Stretching to Full Height of Parent (using align-self stretch)

Do you mean something like this ?

you have to add align-items: stretch; to the parent not the item itself

check out this css flex guide

add align-items: stretch; to .appShopSummaryContainer .appShopSummaryProductWrap and remove height: 100%; from .appShopSummaryContainer .appShopSummaryInfo and add justify-content: center; to .appShopSummaryContainer .appShopSummaryInfo

.appShopSummaryContainer {  display: flex;  flex-flow: column wrap;}.appShopSummaryContainer .appShopSummaryProductWrap {  flex-basis: 100%;  background: pink;  height: 100%;  width: 100%;  display: flex;  flex-flow: row nowrap;  align-items: stretch;}.appShopSummaryContainer .appShopSummaryImg {  flex: 0 0 40%;  height: auto;  padding-bottom: 26.667%;  background: green;  background-size: cover !important;  background-position: center center !important;}.appShopSummaryContainer .appShopSummaryInfo {  flex: 0 0 60%;  background: orange;  display: flex;  flex-flow: column wrap;  align-items: flex-start;  justify-content: center;}.appShopSummaryContainer .appShopSummaryMoreInfoBtn {  cursor: pointer;  background: #214291;  color: #fff;  padding: 10px;  border-radius: 5px;}

<div class="appShopSummaryContainer">  <!-- FOR EACH THING DO THIS -->  <div class="appShopSummaryProductWrap">    <a href="#" class="appShopSummaryImg" style="background:url('https://images.pexels.com/photos/982021/pexels-photo-982021.jpeg')"></a>    <div class="appShopSummaryInfo">      <h3>Title</h3>      <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>    </div>  </div>  <!-- ENDFOREACH --></div>

Flexbox: stretch sidebar height to the parent

In Bootstrap 4.1 there is a flex-fill utility class for this purpose.

.flex-fill {
  flex: 1 1 auto;
}

In your case, add it to your container-fluid and you won't need all the h-100s. Also, make the container fluid d-flex so that flex-fill can also be applied on the row.

<div class="main h-100 d-flex flex-column">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a href class="navbar-brand">Menu</a>
  </nav>
  <div class="container-fluid flex-fill d-flex">
    <div class="row flex-fill">
      <div class="col-xs-2 bg-light pr-3 menuContainer d-flex flex-column">
        <button class="btn btn-outline-primary mt-3 btn-sm btn-block"> Test </button>
        <nav class="nav navbar-light list">
          <ul class="navbar-nav flex-column">
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>
          </ul>
        </nav>
      </div>
      <div class="col-xs-10 p-0">
        Content
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/GEiw0PABgi

Also, note that col-xs-* is col-* in Bootstrap 4 as the -xs infix has been removed. Here's a simplified example w/o the extra CSS.

Related questions:
Bootstrap 4 Navbar and content fill height flexbox

Flex items not filling the height of its parent

Make sure the grid layout container has height of 100vh and the container you've shown also has height of 100%.
To center the text inside of each item, you can make each of them display: flex.

.grid-container {
    height: 100vh;
}


#container {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0px;
    font-size: 30px;
    background: #34ace0;
}

Fill height css flexbox with many nested containers

It takes 'getting used to', but it is often convenient to simply turn all elements for a 'cardlist' into flexbox containers (FBL).

steps to follow:

make html and body fill the full viewport
make the cardlist and cards flexbox column containers
have the FBL elements all stretch to fill their parents
define exceptions to the the above
define eye-candy

Result is the following snippet

/********************************/
/* some convenient global rules */
/********************************/
*, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box }

/* fill full viewport */
html, body  { width: 100%; max-width: 100%; height: 100% }

/* remove default body spacing */
body { margin: 0 }

/*******************/
/* Demo SO72942064 */
/*******************/
.content-wrapper {
    min-height: auto !important; /* to override JS, [OPTIONAL] */
    height: 100%;                /* fill parent */
}
/*
    'content-wrapper' and all decendants are
    flexbox containers (FBL) stretching to fill their parent.
*/
.content-wrapper, .content-wrapper * {
    display: flex; flex-flow: column wrap; /* as parent FBL */
    flex: 1;                               /* as child FBL  */
    width: 100%;
}

/* headers have exceptions to above rule [OPTIONAL] */
[class$="header" i] { flex-flow: row wrap; flex: 0 }
/* ...classnames ending with "header", case-insensitive... */

/******************/
/* eye-candy only */
/******************/
.content-wrapper * { background-color: hsl(0,0%,0%,.05) }
.card-body         { background-color: hsl(0,100%,50%,.05) }

[class$="header" i], .card-body { padding: 0.5rem }

* { outline: 1px dashed } /* for debugging */

<div class="content-wrapper" style="min-height: 937px;">
    <div class="content-header">
        header 1
    </div>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        header 2
                    </div>
                    <div class="card-body">
                        <div id="mycontent">
                            content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

How to Stretch Flex Child to Fill Height of the Container