I'm working with tailwind and try to create a quartered flexbox inside a container with fixed height.
The flexbox should not overflow that fixed height. It works just fine until I add an img-element. Then the flexbox grows above the fixed height of the container. This just happens with img-elements. Even if I set their height to 1% it causes the flexbox to overflow. If i limit the width of the image element itself, I can counteract the problem. But I want the image to be limited to 100% width/100% height of the parent element (and scaled with preserving aspect ratio).
I've also read that image elements and flexbox have some strange behavior. The recommended solution was to put the image element inside another div container. But that either causes problems with vector images or leads to the same problem with overflow of the flexbox.
.icon { height: 100%; width: 25%;}.icon > img { height: 25%; width: auto;}.line-red { outline: 1px solid red;}.line-green { outline: 1px solid green;}.line-blue { outline: 1px solid blue;}.line-orange { outline: 1px solid orange;}.line-purple { outline: 1px solid purple;}<script src="https://cdn.tailwindcss.com"></script><div class="h-screen"> <!-- Demonstration purpose only --><div class="h-3/4 w-3/4 overflow-auto line-red" style="min-height: 75%;"> <!-- Demonstration purpose only --><div class="flex flex-col align-center h-full"><div class="text-center">Title</div><div class="flex flex-wrap self-center h-full w-3/4"><div class="w-full h-1/4 line-green"><div class="icon"> Box 1</div></div> <div class="w-full h-1/4 line-blue"><div class="icon"> Box 2</div></div> <div class="w-full h-1/4 line-orange"><div class="icon"><img src="https://svgur.com/i/kDQ.svg" /></div></div> <div class="w-full h-1/4 line-purple"><div class="icon"> Box 4</div></div> </div></div></div></div>