1

I need to make .left and .right at least 100% height of the page height. I added .h-100 (height: 100%) to .container and .row. Fiddle.

IE 11, Firefox, Edge works like a charm:

enter image description here

However in Chrome:

enter image description here

Is this a know bug? How can I solve it?

EDIT: closed as duplicate but the original question doesn't state a clean a answer. Working fiddle, solved adding display: flex and flex-grow: 1 to .main and .container-fluid.

Cœur
  • 37,241
  • 25
  • 195
  • 267
gremo
  • 47,186
  • 75
  • 257
  • 421
  • Kindly add you Markup. – Rajan Benipuri Mar 11 '18 at 10:41
  • 1
    The main problem here is when combine `height: 100%` (`h-100`) with flex elements not having a height set, which won't work. As the dupe suggest as one of its the solutions, use nested flex elements all the way and remove the `h-100`. – Asons Mar 11 '18 at 11:02
  • The edit you made, nesting Flexbox, is very well showed in the dupe link's accepted answer, section _"4. Nested Flex Containers (recommended)"_. And if you understand the well explained logic in the answer, you don't need a cleaner answer. Am also sure you already know we don't add our own "(solved)" to a questions title, nor an answer within the same. – Asons Mar 11 '18 at 17:22
  • @LGSon my question is tailored bootstrap and containers/rows/columns with flexbox, hence the anwer from the other question isn't well suited. – gremo Mar 11 '18 at 17:34
  • Then out of curiosity, if to be tailored Bootstrap, why do you use Flexbox properties and not Bootstraps built-in Flexbox classes? – Asons Mar 11 '18 at 19:26
  • Furthermore, ... https://meta.stackexchange.com/questions/116101/is-it-ok-to-add-solved-to-the-title-of-a-question – Asons Mar 11 '18 at 19:31
  • @LGSon in order to create a sematic grid, have a look at https://getbootstrap.com/docs/4.0/layout/grid/#mixins. In addition there are no bootstrap classes for, example, flex-glow. – gremo Mar 11 '18 at 19:48

0 Answers0