Flex Item with Image Child Doesn't Adjust Its Size Properly

Flex item with image child doesn't adjust from its original width

Here are two ways to fix the problem:

Method #1 – Remove the extra wrapper. Make the image itself the flex item.

.wrapper {

  display: flex;

  flex-direction: row;

  height: 50px;

}

img {

  height: 100%;

}

.content {

  padding: 5px;

}

<div class="wrapper">

  <img src="http://placehold.it/350x150"/><!-- div wrapper removed -->

  <div class="content">content</div>

</div>

Image flex item does not shrink height in a flexbox

Note that in your example, the item is the flex item and not content - you should check the strech behaviour of item here.

How can we opt out of img's special behaviour so that it behaves like
other flex items (such as div)?

It behaves like other flex items - <img> may not be very useful as a flex item but the stretch behaviour works fine:

if the image has more height than item, the item stretches to the height of the image
if the image has less height than item, the image stretches to the height of the content breaking its aspect ratio.

See demo below:

.container {

  border: 1px solid;

  display: flex;

}

.item {

  background: cadetblue;

}

.content {

  width: 200px;

  background-color: hotPink;

}

img {

  display: block;

}

<h2>Small content</h2>

<div class="container">

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">

  <div class="item">

    <div class="content">some text here some text here some text here </div>

  </div>

</div>

<br/>

<h2>Large Content</h2>

<div class="container">

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">

  <div class="item">

    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>

  </div>

</div>

Flex image won't shrink with screen size when container is a hyperlink

The problem has nothing to do with hyperlinks. You could wrap the image in any element (try a span or a div) and it will have the same effect as the a container.

The problem is the hierarchical structure of a flex container.

When you set an element to display: flex (or inline-flex) you establish a flex container.

Only the children of a flex container are flex items. Descendants of a flex container beyond the children are not flex items and don't accept flex properties.

Here are the three flex items:

<a href=""><img src="flash-tooltip.png"></a>
<img src="html-tooltip.png">
<img src="portables-tooltip.png">

The img in the first element is not a flex item. It is wrapped by the a element and is therefore a child of a flex item.

The two img items can shrink because of two default settings on a flex container:

flex-wrap: nowrap ~ flex items are forced to remain on a single line
flex-shrink: 1 ~ flex items are permitted to shrink to prevent them from overflowing the container

If you switch to flex-wrap: wrap and/or flex-shrink: 0 the img items will no longer shrink.

The a item does not shrink because of another default setting: min-width: auto, which means that flex items cannot be smaller than the size of their content. In this case, the a item cannot shrink below the width of the image.

You can override this setting by adding min-width: 0 to your code.

#container {

  display: flex;

}

span {

  min-width: 0;

  display: flex;

}

img {

  min-width: 0;

}

<div id="container">

  <span><img src="http://i.imgur.com/60PVLis.png"></span>

  <img src="http://i.imgur.com/60PVLis.png">

  <img src="http://i.imgur.com/60PVLis.png">

</div>

Image doesn't scale inside flexbox

Its a common problem with Flexbox. You must put your image into a display:block item. figure is by default a block container. Here is a work around :

    .image-size{

      height:auto;

      width: 100%;

    }

    figure{

      width : 300px;

    }

    .container{

      display: flex;

    }

    <div class="container">

      <figure>

        <img class="image-size" src="https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.png" alt="circle" />

      </figure>

    </div>

Grow/Shrink flex item to fit image

One way to do it is to simply erase the DIV around the image (you won't see the background anyway, if it works the way you want), which makes the image itself a flex-item, and leave that at the default settings:

.wrap {

  display: flex;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

img {

  height: 100%;

  width: auto;

}

.content-container {

  background-color: green;

  overflow: auto;

}

<div class="wrap">

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/230px-Kitten_in_Rizal_Park%2C_Manila.jpg" />

  <div class="content-container">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae interdum nunc. In nec semper lectus. Nunc et nisi mi. Integer lobortis lobortis fermentum. Pellentesque egestas, turpis eget rhoncus feugiat, massa elit euismod eros, et venenatis libero ex sed ipsum. Cras ut nisi eget erat hendrerit porttitor. Pellentesque mi elit, fringilla vel nulla eget, consequat iaculis ante. Maecenas rhoncus ante nec augue maximus tristique ac ut massa. Suspendisse sit amet mi nunc. Integer commodo nulla non sapien volutpat, non faucibus nunc scelerisque. Nullam nec venenatis ligula. Etiam ac molestie magna, et dictum nibh.

  </div>

</div>

Why image inside flexbox doesn't shrink?

To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value of the
min-width and min-height properties. - W3C

Chrome has not implemented that yet, but Firefox has it already. What you can do is:

#div1 {
    flex: 1 1 100%;
    min-width: 0; /* for Firefox and future Chrome etc. */
}

#div2 {
    width: 300px;
    flex: 0 0 auto; /* do not grow or shrink the size */
}

JSFIDDLE DEMO

Why does wrapping an image with a div in a flexbox scale it correctly but img item doesn't scale?

Does this do what you need?

Markup:

<body>
  <div class="stack">
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
    </div>
</body>

CSS:

.stack {
  display:flex;
}
.stack img {
   align-self:center;
   width: 100px;
}

https://jsfiddle.net/zbac1dxe/6/