Stack divs on top of each other using bootstrap flexbox

Question

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 · Accepted Answer · 2020-10-09T05:58:54.897

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>

ed2 · Answer 2 · 2020-10-09T05:57:27.220

There are normally a couple of properties to ensure are set on the parent and each child in order to get flex items to behave how one expects.

Check out this handy summary: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You could also refer to this one: https://www.w3schools.com/css/css3_flexbox.asp

Your example displays as two divs, one vertically above the other. Is this not what you want? Or do you just want them to be taller?

If you want your enclosing DIV to be taller in order to cause your flex items to stretch taller, you could consider setting a min-height of the wrapper. For example, see How can I make my flexbox layout take 100% vertical space? or flexbox + bootstrap 4. How to stretch child of .col-**-*?

If you want an item to be 50% of the visible window space, you could use this css on that object: min-height: 50vh;

Thank you for the links and yes, I want to make the boxes taller. I want flexbox 1 to be 50% (or n%) of the page and have flex box 2 take the remaining space. — Jeff Benister, Oct 09 '20 at 05:41
When you say 50% of the page, do you mean 50% of the visible window space? See edited answer. — ed2, Oct 09 '20 at 05:56

Stack divs on top of each other using bootstrap flexbox

2 Answers2