Skip to content Skip to sidebar Skip to footer
Home / Css / Flexbox / Html

Flex Item Not Filling Screen Height With "align-items: Stretch"

Post a Comment
With body's flex-direction: row;, I am expecting its align-items: stretch; will stretch the child item vertically to fill the screen height. I don't understand why this is not happ

Solution 1:

It's not happening because the height of body is the height of the content.

See the red border around body in your code: https://jsfiddle.net/qc6fu1b3/2/

As you can see, align-items: stretch has no space to work.

Unlike width, which block elements fill 100% by default, heights must be defined. Otherwise, elements default to auto – the height of the content.

When you say:

I am expecting [...] the child item vertically to fill the screen height.

There's no reason to expect this with CSS default behavior. If you want the element to expand the height of the screen, then define that in your code:

html { height: 100%; }

body {
       height: 100%;
       display: flex;
       flex-direction: row;
       align-items: stretch;
       align-content: stretch;
       background-color: green;
}

.flexContainer {
      display: flex;
      background-color: blue;
}
<body><divclass="flexContainer">Hello</div></body>

Post a Comment for "Flex Item Not Filling Screen Height With "align-items: Stretch""