I am using flexbox , and the child elements won't shrink to fit

Question

I have tried changing the min-width, I have tried numerous changes with flex-shrink, and It wont condense down to the size of the flex container. I am using codepen.io on Microsoft edge browser. I did try opening on chrome to no avail.

.ArkStatues {
  display: flex;
  border-radius: 5px;
  border: 10px solid black;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

#statue1 {
  // border-radius:5px;
  // border: 1px solid lightyellow;
  min-width: 0;
}

#statue2 {
  //border-radius:5px;
  //border: 1px solid lightyellow;
  min-width: 0
}

#statue3 {
  //border-radius:5px;
  // border: 1px solid lightyellow;
  min-width: 0;
}

<div class="ArkStatues">
  <div id="statue1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/55/San_Domenico22.jpg" alt="St. Petronius" />
  </div>
  <div id="statue2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/San_Domenico34.jpg" alt="St. Proclus" />
  </div>
  <div id="statue3">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Angel_by_Michelangelo_-_1.JPG
    " alt="Marble Angel" />
  </div>
</div>

you need max-width:100% on image – Temani Afif May 09 '20 at 18:57 — Temani Afif, May 09 '20 at 18:57

score 1 · Accepted Answer · answered May 09 '20 at 18:10

There are a couple reasons why your items aren't fitting:

Flex children don't just shrink because you have more than one item. They will take up the space they need.
Your images aren't set to have any specific width, so they will be as wide as their natural size.

I updated your CSS with a class for statue to make it more efficient - since all those elements shared properties.

.ArkStatues {
  display: flex;
  border-radius: 5px;
  border: 10px solid black;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.statue {
  border-radius: 5px;
  border: 1px solid lightyellow;
  flex: 0 0 33.333%;
  box-sizing: border-box;
}

.statue img {
  width: 100%;
  height: auto;
  display: block;
}

<div class="ArkStatues">
  <div id="statue1" class="statue">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/55/San_Domenico22.jpg" alt="St. Petronius" />
  </div>
  <div id="statue2" class="statue">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/San_Domenico34.jpg" alt="St. Proclus" />
  </div>
  <div id="statue3" class="statue">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Angel_by_Michelangelo_-_1.JPG
    " alt="Marble Angel" />
  </div>
</div>

This explained what I didn't understand and fixed it with a good explanation. Thank you. — LordSlickRick, May 11 '20 at 00:50

score 0 · Answer 2 · answered May 09 '20 at 18:08

Is this what you were looking for? The main thing missing is a flex property to assign equal weight in the flex-box to all three items. The object-fit properties are optional, but mean that the last image scales to the rest of the container without any whitespace. You can remove them to see the difference.

.ArkStatues{
  display:flex;
  border-radius:5px;
  border: 10px solid black;
  flex-direction:row;
  flex-wrap: no-wrap;
}

#statue1 {
  flex: 1;
}
#statue2 {
  flex: 1;
}
#statue3 {
  flex: 1;
  object-fit: cover;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="ArkStatues">
  <div id="statue1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/55/San_Domenico22.jpg" alt="St. Petronius" />
  </div>
  <div id="statue2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/San_Domenico34.jpg" alt="St. Proclus" />
  </div>
  <div id="statue3">
    <img id="img3" src="https://upload.wikimedia.org/wikipedia/commons/9/94/Angel_by_Michelangelo_-_1.JPG
" alt="Marble Angel" />
  </div>
</div>

I am using flexbox , and the child elements won't shrink to fit

2 Answers2