Image overflows its container (flexbox)

Asked Aug 12 '19 at 22:49

Active Aug 12 '19 at 23:01

Viewed 13 times

I have a container that houses 3 items. My nav is set height and so is my footer. I have an image in the middle and I'm trying to contain it within its container but it overflows.

How can I contain any image size within its container and also span it so it fills 100% of the viewport height?

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.controls {
  display: flex;
  height: 20px;
  background: purple;
}

.main-image-wrapper {
  background: yellow;
}

.other-images-wrapper {
  height: 60px;
  background: purple;
}

<div class="container">
  <div class="controls">
    <p>yo</p>
  </div>
  <div class="main-image-wrapper">
    <img src="https://c8.alamy.com/comp/CTB473/sunset-scene-long-exposure-shot-vertical-panoramic-composition-hdr-CTB473.jpg" alt="">
  </div>
  <div class="other-images-wrapper">
    <p>hey</p>
  </div>
</div>

edited Aug 12 '19 at 23:01

ThS

4,597
2
15
27

asked Aug 12 '19 at 22:49

RogerFedFan

1

This? https://jsfiddle.net/kht45Lnx/ – Michael Benjamin Aug 12 '19 at 22:55
@Michael_B Yes this almost worked. Added a max height and width to the img and it fit perfectly. Thanks! – RogerFedFan Aug 12 '19 at 23:12
1

So it's mostly a flex minimum size issue, which is addressed in the duplicate post. – Michael Benjamin Aug 12 '19 at 23:15

Image overflows its container (flexbox)

0 Answers0