0

I am working with Flexbox and have simple layout

.container {
  display:flex;
  flex-direction:row;
}

.image-wrapper {
  flex:1;
  position: relative;
  padding-bottom: 56.2%;
}

.image-wrapper img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
<div class="container">
  <!--  Image start  -->
  <div class="image-wrapper">
    <img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
  </div>
  <div class="image-wrapper">
    <img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
  </div>
  <div class="image-wrapper">
    <img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
  </div>
  <!--  Image end  -->
</div>

I am trying to ensure that the images are all 16:9 aspect ratio. This works without flexbox, but as soon as I make my divs flex then it no longer works.

What am I doing wrong?

fightstarr20
  • 11,682
  • 40
  • 154
  • 278

1 Answers1

1

An initial setting of a flex container is flex-wrap: nowrap. This means that flex items will remain confined to a single line no matter what. Add flex-wrap: wrap.

.container {
  display:flex;
  flex-wrap: wrap;
}

Also, note the following post, which may be obsolete by now, but maybe not in some browsers.

jsFiddle demo

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • But I want to keep them in a row, not a column – fightstarr20 Jun 19 '18 at 19:47
  • 1
    Oh, you said in your question that it "works without flexbox", so it appeared to me that you wanted the same behavior as block layout. – Michael Benjamin Jun 19 '18 at 19:48
  • 1
    Just remove `flex-wrap: nowrap`. The `flex: 1 0 100%` I already added should be enough to make it work, at least in Chrome. See the link I posted for other browsers. https://jsfiddle.net/0o89Lem6/6/ – Michael Benjamin Jun 19 '18 at 19:49
  • Sorry, original post wasn't very clear. I meant the 16:9 aspect ratio works without flexbox, but when I put them in a flexbox layout for 3 in a row, the aspect ratio breaks – fightstarr20 Jun 19 '18 at 19:55