1

I want to have 3 divs that fluidly respond (scale both width and height maintaining same ratio) to browser width. The majority of my images are vertical so that's why I created as overflow: hidden because I don't mind to hide portion of the image for very long images - think the screenshot of a website for instance!

However in some cases a few images are shorter, so what to do in that case? Maybe use JS?

This is my code: https://codepen.io/anon/pen/wrygJE

.flex1 {
  display: flex;
}

body {
  background-color: #ccc;
}

.archives .imageContainer {
  position: relative;
  width: 100%;
  padding-bottom: 70vw;
  height: 0;
  margin: 30px 0;
  margin-bottom: 40px;
  overflow: hidden;
  border: 10px solid #fff;
}

.archives {
  padding: 30px 30px 40px 30px;
  width: 100%;
  box-sizing: border-box;
  font-size: 0;
  position: relative;
}

.archives img {
  width: 100%;
  position: absolute;
  left: 0;
}

.archives .imageContainer.half.medium {
  width: calc(30% - 15px);
  width: -moz- width:calc(30% - 15px);
  width: -webkit- width:calc(30% - 15px);
  width: -o- width:calc(30% - 15px);
  display: inline-block;
  margin-left: 30px;
  flex-grow: 3;
}

.archives .imageContainer.half.small {
  width: calc(15% - 15px);
  width: -moz- width:calc(15% - 15px);
  width: -webkit- width:calc(15% - 15px);
  width: -o- width:calc(15% - 15px);
  display: inline-block;
  margin-left: 30px;
  flex-grow: 3;
}
<div class="archives">
  <div class="flex1">
    <div id="thumb75" class="imageContainer  ">
      <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg">
    </div>
    <div id="thumb76" class="imageContainer half medium">
      <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg">
    </div>
    <div id="thumb77" class="imageContainer half small">
      <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg">
    </div>
  </div>
</div>
Francesco
  • 24,839
  • 29
  • 105
  • 152

1 Answers1

0

An initial setting on a flex container is align-items: stretch. This means that flex items will expand along the cross-axis to cover the full available length of the container.

If you override that default, the flex items will close the gap with the content. Try this:

.flex1 {
    display: flex;
    align-items: flex-start;
 }

Also, remove any defined heights from the flex items, as they will override align-items.

revised codepen

Related: How to disable equal height columns in Flexbox?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • the problem of your code is that, it doesn't have a max-height as in my request/example – Francesco Oct 06 '17 at 17:13
  • 1
    Like I wrote in my first comment, your question isn't entirely clear. For example, where is the `max-height` requirement in your question? Maybe it's implied in your demo, but it wasn't given much focus. – Michael Benjamin Oct 06 '17 at 17:16