I am new to web coding, and met a strange behavior when using flexbox.
When a parent is using flex-grow: 1, the child element height: 100% doesn't work.
I saw several solutions but doesn't work for me. Does anyone could explain the reason and share some solutions? Thanks!
* { box-sizing: border-box; margin: 0; padding: 0;}html,body { min-height: 100vh;}body { display: flex; flex-direction: column;}header { flex: 0 0 auto; background-color: aqua;}main { flex: 1 0 auto; /* Enable flex grow */ background-color: blanchedalmond;}footer { flex: 0 0 auto; background-color: brown;}div#this_should_fill_main { height: 100%; /*This doesn't work！*/ background-color: cornflowerblue;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="style.css"></head><body><header>This is a header</header><main><div id="this_should_fill_main">This is main content</div></main><footer>This is a footer</footer></body></html>I tried to add height: 0 to <main>, but when the content is overflow, the footer will not be sticky.
I also tried other solutions mentioned in this queestion How can I make Flexbox children 100% height of their parent?, but make no sense for me.
- add
align-items: stretchto<main>; no change at all - add
align-self: stretchto<div id="this_should_fill_main">; no change at all - use
display: flexagain in<div id="this_should_fill_main">; it works, but why doesn't onlyheight: 100%work?
Could you please help me to solve:
- Why
height: 100%doesn't work in this case? - How to solve this without using flexbox again?
Thanks for all your answers!
