bootstrap 4 flex issue not filling 100% of parent height

Question

I'm attempting to get a 2 column grid working with boostrap flex that takes the entire page height. For some reason, this code isn't filling 100% of the page.

the body tag has a width and height of 100%. I've included the snippet below. No other CSs has been created.

<div class="d-flex flex-row w-100 h-100 border">
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
</div>

Answer 1

To use the style height: 100%. You need to provide the parent height value. If the parent height is still using height: 100%... until the root (body, html). You need to set the height values of html and body tags to 100%.

html, body {
  height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="d-flex flex-row w-100 h-100 border">
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
    <div class="d-flex flex-column h-100 border ">
        test
    </div>
</div>

---

I've made an example with some items to test flex-column for you.

html, body {
  height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="d-flex flex-row w-100 h-100 border">
    <div class="d-flex flex-column h-100 border ">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
    </div>
    <div class="d-flex flex-column h-100 border ">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
    </div>
</div>

Answer 2

that's because your parent div doesn't have a height .when you use % , its relative .I mean people usually say 100% of this or 100% of that .Got it?