I have a parent div with 3 children in my .html sheet, and a .css sheet that mirrors this.I set the parent div to display the children as a row with flex (which i wanted), but i also want the height of each child here to have a downwards fill in order to occupy the remaining window height - i've spent a couple hours looking around but i still can't find what i'm looking for, so i'll attach an image so you can see for yourself what i'm trying to do. (thank you for reading)Screenshot of my browser and live code
.sector { display: flex; flex-direction: row; min-height: 100%; height: 100%;}.mlist { background-color: lightpink; flex: 1; text-align: left;}.middlesearch { background-color: lightgreen; flex: 3; text-align: center;}.plist { background-color: lightblue; flex: 1; text-align: right;}<body><p> [17] Test: Hello welcome to [text]</p><div class="sector"> <div class="mlist"><p> [23] test div mlist (master list)</p></div><div class="middlesearch"><p> [28] test div middlesearch (search window)</p></div><div class="plist"><p> [33] test div plist (personal list)</p></div></div></body>