Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1317

Image causing column flexbox to overflow if fails to load

$
0
0

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:

Example

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>

Viewing all articles
Browse latest Browse all 1317

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>