I'm trying to understand flex boxes. I've written this code here:
body { margin: 0; padding: 0; background-color: red;}/* cell block */.page-content { display: flex; flex-direction: column; flex-wrap: wrap; background-color: green; justify-content: space-around;}/* row within cell block */.content-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; background-color: yellow; height: 100%;}/* element within row */.inner-wrapper { background-color: pink; padding: 0; width: 100%; height: 100%;}/* any content inside a row element */.content { padding: 5%; background-color: blue; flex-grow: 1; flex-shrink: 1;}.width-3 { width: 30%;}<div class="page-content"><div class="content-row"><div class="inner-wrapper width-3"><h3 class="content">HEADER</h3><p class="content">inner text1.inner text1.inner text1.inner text1.inner text1.</p></div><div class="inner-wrapper width-3"><h3 class="content">HEADER</h3><p class="content">inner text2.inner text2.inner text2.</p></div><div class="inner-wrapper width-3"><h3 class="content">HEADER</h3><p class="content">inner text3.inner text3.inner text3.</p></div></div><div class="content-row"><div class="inner-wrapper width-3"><h3 class="content">HEADER</h3><p class="content">inner text4.inner text4.inner text4.</p></div><div class="inner-wrapper width-3"><h3 class="content">HEADER</h3><p class="content">inner text5.inner text5.inner text5.inner text5.inner text5.inner text5.</p></div><div class="inner-wrapper width-3"><h3 class="content">HEADER</h3><p class="content">inner text6.inner text6.inner text6.</p></div></div></div>The boxes are being cut off and I don't want that to happen. When I add a fixed height of at least ~300px to 'page-content' or lots of text to the 'content' blocks, things size a little better. It looks like the 'inner-wrapper' is taller than the 'content-row'. Why is this happening?
I basically just want two rows with three elements each that fill up all available space. Each row should take 50% of the vertical space and each row element should occupy 33% of the horizontal space. If more rows or elements are added, the spacing should adjust proportionally.
I want to stay away from using vh and vw.