How do fill up vertical remaining space?
For display: flex elements, using flex: 1 fills up remaining horizontal space. I used this to make each card the same width. Similarly, using grid and fr units can achieve the same result. However, using flex, how could I take up the remaining height for each card of the container?
3 Replies
This is only a portion of my page.
The section/container's height is set to 100vh. Despite content taking up majority of space, setting card height to 100% makes each card height 100vh. I'm looking to only take up remaining space
@-Matt I am a complete beginner,, but wanted to understand your problem.
What is the parent of the flex elements?
By default, flexbox will take up all available space, so it's probably an issue of your CSS. Please provide a working codepen so we can see your code: screenshots don't work.
Read #How To Ask Good Questions for more tips.