When setting flex: 1 1 0 on flex items, it does not work as expected especially when the flex items contain images of varying sizes.
In this scenario, the flex-item containing the image ends up becoming significantly wider than the others.
Below is the HTML code:
<div class="flex-container">
<div class="flex-item">
<p>Hi</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Episkopi_01-2017_img11_Kourion.jpg">
</div>
<div class="flex-item">
<p>there</p>
</div>
<div class="flex-item">
<p>dear</p>
</div>
<div class="flex-item">
<p>reader</p>
</div>
</div>
And here is the corresponding CSS:
.flex-container {
flex-direction: row;
display: flex;
}
.flex-item {
flex: 1 1 0;
}
.flex-item:nth-child(odd) {
background-color: blue;
}
.flex-item:nth-child(even) {
background-color: yellow;
}
You can view the example here: https://jsfiddle.net/gzLwn7cu/
One workaround I tried was using width instead of flex properties. This resulted in correct widths for the flex-items, but caused the image to overflow.
.flex-item {
width: 25%;
}
View the updated example here: https://jsfiddle.net/gzLwn7cu/1/
To resolve the issue, I had to apply specific properties directly to the image itself:
img {
width: 100%;
height: auto;
}
Updated example with image properties: https://jsfiddle.net/gzLwn7cu/1/
However, my goal is to have child elements contained within flex-items of equal size along the primary axis without prior knowledge of their contents.
I am wondering if there is a flex property that can achieve this desired effect?