Image size not respected in flexbox

Question

I have an image and text which I want to vertically align:

  <div>
      <img src="xyz.png" style="width:70%;">
      <p>xyz</p>
  </div>

The text floats around the image. The width of the is inlined because it's a wysiwyg content field and I have limited to no control over markup.

Now I thought about vertical alignment via flexbox:

div {
  display: flex;
  align-items: center;  
}

Et voilà. It works but the percentage size of the image is not respected anymore. Why? Also, what is this new image size based on? It's not the percentage but also not the original size.

Codepen Example

.original {
  float: left;
}

img {
  float: left;
  padding: 10px;
}

.vAlign {
  display: flex;
  align-items: center;
}

<h1>Original Markup</h1>
<div class="original">
  <img src="http://via.placeholder.com/350x150" style="width:70%;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd </p>
</div>


<h1>verticalign (But wrong img Size)</h1>
<div class="vAlign">
  <img src="http://via.placeholder.com/350x150" style="width:70%;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>
</div>

Michael Benjamin · Accepted Answer · 2018-03-28T12:31:10.933

An initial setting of a flex container is flex-shrink: 1. This means that flex items are permitted to shrink in order to avoid overflowing the container. Disable flex-shrink.

.original {
  float: left;
}
img {
  float:left;
  padding: 10px;
}
.vAlign {
  display: flex;
  align-items: center;
}

img { flex-shrink: 0; } /* NEW */

<h1>Original Markup</h1>
<div class="original">
<img src="http://via.placeholder.com/350x150" style="width:70%;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd </p>
</div>


<h1>verticalign (But wrong img Size)</h1>
<div class="vAlign">
<img src="http://via.placeholder.com/350x150" style="width:70%;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>
</div>

ALSO NOTE that float does not work in a flex container.

There is one more question: *what is this new image size based on?* — Stickers, Mar 28 '18 at 12:38
It's based on reducing the size of flex items just enough to prevent an overflow of the container. There is a `flex-shrink` algorithm. It's a bit technical. https://stackoverflow.com/questions/34753491/how-does-flex-shrink-factor-in-padding-and-border-box — Michael Benjamin, Mar 28 '18 at 16:47

Image size not respected in flexbox

1 Answers1