Stack divs on top of each other using bootstrap flexbox

Jeff Benister

Sorry for the newbie post but I am new to bootstrap (using version 4.0) and have been doing a lot of reading but have not been able to achieve the simple task of stack two divs on top of each other.

<div class="d-flex flex-column">
  <div style="background: blueviolet">
    Flex item 1
  </div>
  <div style="background: burlywood">
    Flex item 2
  </div>
</div>

My aim is to have Flexbox 1 50% height and Flexbox 2 fill the remaining height or have Flexbox 1 at 40% height and have Flexbox 2 fill the remaining space.

I have been following bootstrap documentation to learn. What other resources could I look into?

Thank you for the help.

huan feng

You can use the class flex-fill to auto-fill for the rest of the space.

Try to adjust the height of class .item-1 to see the result.

https://jsfiddle.net/ramseyfeng/bqvwcLe5/1/

html,body {
  height: 100%;
}

.item-1 {
  height: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-column h-100">
  <div style="background: blueviolet" class="item-1">
    Flex item 1
  </div>
  <div style="background: burlywood" class="flex-fill">
    Flex item 2
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.