I'm learning html/css vanilla design.My layout should be an header, a footer and 3 columns that fill all the space, whatever their content.I'm thinking in a layout grid-based for the 3 columns, and idea was to use display:flex; for stretch the central column for fill 100% height of the parent container.
body {margin: 0px;padding: 0px;box-sizing: border-box; }header { position: sticky; top: 0; background-color:rgb(89, 89, 165); height: 40px; display: flex; justify-content: end; align-items: center; flex: 1; padding: 0.1em;}footer { bottom: 0; position: fixed; width: 100%; padding: 5px; background-color: darkslategray; height: 2vm; font-style: italic; font-size: 1vm; display: flex;}.main-container { display: grid; grid-template-columns: 1fr 3fr 1fr; justify-items: center; .main-column { display: flex; border-style: groove; border-width: 4px; padding: 1em; justify-content: center; justify-self: stretch; align-self: stretch; }}<body><header> ...</header><div class="main-container"><div class="left-column"> ...</div><div class="main-column"> ...</div><div class="right-column"> ...</div></div><footer> ...</footer></body>https://codepen.io/idum/pen/GgKpmNd
Problem is that central column don't fill all the space.
Why?