1

Let's say i have six 200*200 images as flex items inside a 600px width parent div. I want the images to be re-sized as ratio and fit in the parent without using flex-wrap.

I tried to add div to each img work but the structure was too long. And I found another solution work fine by adding min-width: 0; as shown below. I don't understand how it is worked. Can someone explain it please?

HTML

  <div class="stack">
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
  </div>

CSS

.stack {
  display: flex;
  max-width: 600px;
  align-items: center;
  border:1px solid gold;
}

.stack img {
/* How "min-width" work in here? */
  min-width: 0;
  width:200px;
  align-self: center;
}

I expect the width of flex items (<img>) can be responsive to the width of its parent <div>.

Kenny Ng
  • 11
  • 1
  • 2
    The default `min-width` on flex items is `auto`, meaning that the item cannot shrink smaller than the size of its content. When you apply `min-width: 0`, you override that default. Full explanation in the duplicate. – Michael Benjamin Mar 28 '23 at 02:02

1 Answers1

0

I put max-width and height: auto.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    div {
      min-width: 600px;
      border: 1px dashed gold;
      text-align: center;
      padding-top: 3px;
    }
    
    .responsive {
      min-width: 40%;
      height: auto;
    }
  </style>
</head>

<body>



  <div>
    <img class="responsive" src="http://picsum.photos/200/200" min-width="50" min-height="50">
    <img class="responsive" src="http://picsum.photos/200/200" min-width="50" min-height="50">
    <img class="responsive" src="http://picsum.photos/200/200" min-width="50" min-height="50">
    <img class="responsive" src="http://picsum.photos/200/200" min-width="50" min-height="50">
    <img class="responsive" src="http://picsum.photos/200/200" min-width="50" min-height="50">
    <img class="responsive" src="http://picsum.photos/200/200" min-width="50" min-height="50">
  </div>
</body>

</html>
mmirbekian
  • 211
  • 2
  • 10