Stack divs on top of each other using bootstrap flexbox

user_5083843 0
Viewed 861

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.

flexbox bootstrap-4 css
2 Answers

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>

user_39436320

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;

user_141529890
Related