I'm struggling to understand how flexbox containers interact with other blocks. With just a flexbox on my page, I can do what I want. But when I mix in other page elements, things get weird. The problem seems to be space allocation.
My flexbox container seems to need an explicit height. If I don't specify that, I don't get the wrapping behavior. I'm not sure how to specify the height of the flexbox container.
If I set the height of the flexbox container to 100%, it wraps as desired but I am stuck with a scrollbar to nowhere: I've allocated more than 100% of height. I want to allocate 100px above the flexbox container. So I need to make the flexbox container height something like 100% - 100px. I can't mix absolute and relative measurements. And looking down the road, I would prefer not to have to do this math at all, it will become a maintenance hassle.
Below is an example of where things go wrong for me. I want to have some instructions at the top of the page. The instructions should span the width of the page. In the space below, I want a collection of buttons. The buttons should wrap to use multiple columns, as needed.
I can make it work by button the instructions inside the flexbox container. But then, it won't have 100% with like I want, it will get jumbled up with my buttons.
<html><head><style> * { margin: 0; padding: 0; border: 1px solid #A00; } .instructions { height: 100px; background: linear-gradient(to bottom, #ffffff 0%, #999 100%); } .container { display: flex; flex-direction: column; flex-wrap: wrap; height: 80%; } .button { width: 200px; height: 50px; margin: 10px; background: linear-gradient(to bottom, #ffffff 0%, #BBB 100%); border: 1px solid #CCC; text-align: center; }</style></head><body><div class="instructions">Instructions go here.</div><div class="container"> <div class="button">This is Button 1</div><div class="button">Thar be Button 2</div><div class="button">Yarr, button 3</div><div class="button">Hey that is a nice looking button.</div><div class="button">Click Me!</div></div></body></html>