I've been struggling with more website layout work. Layouts are hard, and often when I think I have a good set of generic classes to handle common layouts, I'll find something that doesn't work right.

One thing that I've had issues with plenty of times is having a child fill the height of its parent. Simply using height: 100% often doesn't work the way you hoped. The way I am able to get work most consistently is flex-grow. If you set the parent to use display: flex and flex-direction: column, all you have to do is have the child use flex-grow: 1 to make it fill the height of its parent.

The past couple weeks I spent a decent amount of time trying to solve one very specific layout scenerio; a page with a normal header (not sticky or fixed) and a sticky sidebar menu that is too long to fit on the page. Since the sidebar is sticky, you need the menu to scroll or you'll never see the whole menu. The obvious solution is to set the height of the viewport. However, that doesn't work, because the header is only displayed when the user is at the top of the page; when the user scrolls down, the header is hidden, so the height of the sidebar would need to increase. Handling this cleanly has proven to be most difficult. Since it so difficult to solve, and this scenerio is very specific, I've decided to just recommend that developers don't setup their page like this. Perhaps I will revisit it in the future.