1

I know a solution is set the parent element to relative, and the child the to absolute. Can anyone use a more flex way? (Do not use absolute)

Please do not mark the question easily as duplicate with Make flexbox children 100% height of their parent

Because i have tried the flex way mentioned by @David Storey in that thread, it seems i can only make it work in the flex-direction: row layout, and it cannot work in my fiddle (flex-direction: column) layout.

HTML:

<div class="d-flex flex-column h-100">
  <div class="p-2 d1">Flex item 1</div>
  <div class="p-2 d6 flex-grow-1 d-flex position-relative">
    <div class="inner h-100 flex-grow-1">
      background-color: green;
    </div>
  </div>
</div>

CSS:

html,body{
  height: 100%;
}
.d1 {
  background-color: yellow;
}
.d6 {
  background-color: green;
}
.inner {
  background-color: red;
}

fiddle

huan feng
  • 7,307
  • 2
  • 32
  • 56

2 Answers2

1

If you give the parent of the inner box a height of 100% then the inner wil stretch the whole height.

Ben Romijn
  • 81
  • 9
  • Actually even i don't add h-100 to the parent, i remove the h-100 in the parent, it also works fine. Do you know why it behave incorrect once h-100 is adding into the parent. http://jsfiddle.net/78o54Lmv/3/ – huan feng Dec 07 '18 at 07:33
  • The parent has to have a height of 100%, it has in your fiddle as well. If you remove the h-100 from the inner, it wil stretch to the full height, as stretch is the default value for the align-items property. Be aware that in your description you're talking about flex direction column, but in your fiddle you're using `d-flex` (without `flex-column`) on the parent of the inner-box. – Ben Romijn Dec 07 '18 at 07:41
  • Really thanks for your continuous help. Please see http://jsfiddle.net/78o54Lmv/8/, i have removed the h-100 from the parent, and it works... – huan feng Dec 07 '18 at 07:51
  • Because the outer most div is a `flex-colum` and you set the second child to `flex-grow-1` it will take up all available space. – Ben Romijn Dec 07 '18 at 07:56
1

To which element does the child need to set to 100% ? Hence, you have to set h-100 to the parent class and not the child class.

h-100

jsfiddle

Tanuju
  • 26
  • 5
  • Actually even i don't add h-100 to the parent, i remove the h-100 in the parent, it also works fine. Do you know why it behave incorrect once h-100 is adding into the parent. http://jsfiddle.net/78o54Lmv/3/ – huan feng Dec 07 '18 at 07:33
  • when you provide the 'h-100' to the child, you're basically over-ridding the flex-grow property telling it to set 100%; to which it has got no reference of – Tanuju Dec 07 '18 at 07:50