Intermediate CSS lesson 321 Flexbox Layout

[danarddaniels]

Is there a special way to solve the given problem? I was able to create the same layout, but my solution was not accepted.

.container { display: flex; flex-direction:column; gap: 5px; border: 3px dashed; padding: 1rem; height: 80%; } .header, .footer, .sidebar, .main { background: #dcdc27; border: 3px solid; } .main{ flex-grow:1; } .content{ display:flex; gap:5px; height: 100%; }

[chinchang]

Hi! Your solution is almost correct - except the way you make your .content element take up the whole height. Though height:100% achieves what you want visually, it is not semantically right. When working with flexbox, as the past lessons talk about, we want flex children to work with space distribution. In the specific level, we want .content to grow by taking up all remaining space. So instead of height: 100% (which is non-logical property anyways), flex-grow: 1 is more appropriate and semantic - that is what the level needs to complete.
Hope that helps. Feel free to reply to discuss any further.

[danarddaniels]

Thanks for the reply. I don't understand why using the property height on the .content isn't as appropriate if I needed to use a height on the .container as well. If they both visually achieved the same result, what is the actual side effects of using my original answer?