Menu icon Foundation
Make Column Fill rest of the height using Flex Grid

Hi guys, I'm trying to code a page layout that roughly looks like this CodePen, I have the `main` container that needs to fill the entire browser screen (100% height), and two child div elements of 12 columns, the first one has a fixed height, and I need the second to fill the rest of the height available in the container, however when I set the height of the second column to 100%, instead taking the remaining height of the container, it just gets 100% of the height of the parent container and ends up with the same height as the parent container. Is there a way to make the second column to simply fill the remaining vertical space left?

flexboxflex-gridsites

Hi guys, I'm trying to code a page layout that roughly looks like this CodePen, I have the `main` container that needs to fill the entire browser screen (100% height), and two child div elements of 12 columns, the first one has a fixed height, and I need the second to fill the rest of the height available in the container, however when I set the height of the second column to 100%, instead taking the remaining height of the container, it just gets 100% of the height of the parent container and ends up with the same height as the parent container. Is there a way to make the second column to simply fill the remaining vertical space left?