I have a basic flexbox layout with a flex container, inside the flex container there is a menu on the top and a container for images below. The container for the images has a dynamic height, it increases it’s vertical size to fit the images which increase their height as they have an aspect ratio and percentage width. The container below the menu increases it’s size and takes up the menu’s space even though I’ve set the height to 50px. How can I prevent the menu shrinking?

I have the following code. How can I get the card div to only be as high as the text within it instead of taking up the entire height of the container div minus the margin I set for it?

When calling ‘flex-inspector’ in Firefox through the icon no window comes as the one expected on the example from other browser.