Question posted in 
I’m puzzled by the following problem:
I created a flex row of fixed width with two elements:
a flex column of two elements: a image which has its width and length given in its html tag and a paragraph, and a larger paragraph occupying 40% of the width, like this:
The problem is: if the image fails to load, its placeholder will overflow. It seems to me that this is not what should happen. I expected the broken image placeholder to have exactly the same dimensions as if it was not broken. What is going on and how do I this?
I added inline widths and heights to avoid layout shifts while loading. I know that removing them solves the problem. Is there a way to avoid the overflow and avoid layout shits altogether?
Here is a JSfiddle of the problem: https://jsfiddle.net/ory40tmf/2/
<div class="container">
<div class="column">
<img width="790" height="679" src="https://www.webkit.org/blog-files/acid3-100.png" alt="Description">
<h2>Image!</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut neque hendrerit, tempor neque ac, sollicitudin odio. Nulla pharetra orci mollis, scelerisque arcu ac, convallis dui. Vivamus augue lectus, semper sed eleifend sed, dignissim nec augue. In hac habitasse platea dictumst. Nam gravida nisl ligula, et faucibus felis imperdiet sed. Vestibulum eget orci tristique, molestie lectus id, varius lectus.
</p>
</div>
.container{
display:flex;
width:600px;
align-items:center;
}
.column{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
img{
height:auto;
min-width:0;
min-height:0;
max-width:100%;
flex: 1 1 auto;
}
p{
flex: 1 0 60%;
}
Here is the same JSfiddle with a broken image (same css): https://jsfiddle.net/ory40tmf/3/
<div class="container">
<div class="column">
<img width="790" height="679" src="https://www.webkit.org/blog-files/acid3-1030.png" alt="Description">
<h2>Image!</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut neque hendrerit, tempor neque ac, sollicitudin odio. Nulla pharetra orci mollis, scelerisque arcu ac, convallis dui. Vivamus augue lectus, semper sed eleifend sed, dignissim nec augue. In hac habitasse platea dictumst. Nam gravida nisl ligula, et faucibus felis imperdiet sed. Vestibulum eget orci tristique, molestie lectus id, varius lectus.
</p>
</div>
2
Answers
What happens when the image is broken, depends on the browser. Chrome and Safari use the dimensions specified in the img tag. A width of 790px then must overflow a container with a width of 600px. To avoid that i would either not specify them in that manner or overwrite it in css later. To control the layout and make it independent from the image while loading i recommend:
Defining the layout rather by controlling the dimensions of the containers than the content.
Giving relative values (flex, percentages), not fixed (px).
These definitions seem to have the desired outcome:
You’re supposed to apply width to the first column ie the container in which the image is present.
Hope, this helps.