I have simple HTML/CSS code, that have 3 divs , Header, content and footer.Header and footer are of fixed height(170px) and content is expected to take remaining vertical space. all threes are placed vertically with the help of diplay:flex and content block is forced to take remaining space with flex-grow:1.
The problem is appearance of vertical scrollbar. I am not able to understand why it is happening as according to my understanding, total height will always be [170px + (atmost remaining) + 170px] , that will always be 100%.
Code:
* { box-sizing: border-box; margin: 0;}html,body { height: 100%;}.main { display: flex; flex-direction: column; height: 100vh;}.header { background-color: lightyellow; height: 170px;}.content { background-color: lightpink; flex-grow: 1;}.footer { background-color: lightgreen; height: 170px;}<div class="main"><div class="header">this is header</div><div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,</div><div class="footer">This is footer</div></div>Someone help me understand why it is happening,also the correct way to achieve the required result.
I have tried adding overflow:hidden to body , but i don't think that is best way to do it, as it is clipping the overflow.