23

I tried to follow the advice in this answer, and as shown in this CodePen, but the image that needs to flex is still keeping its original dimensions unless the screen is so narrow it is alone on the row.

There is another set of divs in the real page in a similar situation - it would help the page work across a much larger range of widths if the side divs would shrink.

The div it is wrapped in has flex: auto; on it and img {width: 90%; height: auto;} for any image in it, the parent of that div has style="flex: 0 1 250px;" on it.

Here is a CodePen of it.

I guess there is a simple mistake, if not I suppose I'll make the image the background of the div it is currently in, and set background-size: 100% auto; on it. 

section {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 3vw;
  margin-left: 6vw;
}
.outerDiv {
  background-color: rgba(50, 50, 0, 0.5);
}
.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px;
}
.innerDiv p {
  padding: 6px 18px 0 15px;
}
.imgResize {
  flex: auto;
  align-self: center;
  padding: 15px;
}
.imgResize img {
  width: 90%;
  height: auto;
}
<section>

  <div class="outerDiv">
    <div class="innerDiv" style="flex: 0 1 250px;">
      <h2>The Rocket Equation</h2>
      <p>Mass ratio:</p>
      <div class="imgResize">
        <a href="rotovator.html">
          <img src="http://www.moonwards.com/img/animatedRotovatorLink.png">
        </a>
      </div>
    </div>
  </div>

  <div class="outerDiv">
    <div class="innerDiv">
      <h2>Suborbital Hop</h2>
      <img src="http://www.moonwards.com/img/mapmini.jpg" width="512" height="256">
      <canvas id="subOrbitalCanvas" width="512" height="256"></canvas>
    </div>
  </div>

</section>
Community
  • 1
  • 1
kim holder
  • 1,744
  • 3
  • 16
  • 25
  • It's unclear what the problem is exactly. The image in `.imgResize > a > img` is behaving responsively because of the relative 90% width attribute, which makes it adapt with the parent. What do you mean exactly by "the image that needs to flex is still keeping its original dimensions"? It resizes when the window gets small. – Michael Coker Jan 21 '17 at 02:31
  • @MichaelCoker It resizes only after the second outerDiv has wrapped. I'd like it to shrink to give it room, and grow when it has extra room. – kim holder Jan 21 '17 at 02:40
  • why not just remove `flex-wrap: wrap;` from `section` so the 2nd outerDiv doesn't wrap? – Michael Coker Jan 21 '17 at 02:49
  • @MichaelCoker There are other divs that are similar on the real page, it would work better over a lot of widths if they would shrink. – kim holder Jan 21 '17 at 02:51

1 Answers1

57

An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot shrink below the size of its content.

In this case, the section element is the primary flex container.

The flex items are .outerDiv.

Because these flex items contain images, they cannot shrink below the image's size. To overcome this, override the default with min-width: 0.

revised codepen

Okay, so now the item can shrink past the content, but the image is still inflexible.

You can fix that with:

img { width: 100%; height: auto; }

revised codepen

Here's more information: Why doesn't flex item shrink past content size?

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • I'm going to have to read that over more carefully in the morning. The image i want to shrink did have that, as 90% and auto, in the class called .imgResize. I need the other one to keep its size, so i did it that way. The behaviour in the revised codepen still has the behavior that is troublesome - the first div set doesn't shrink until after the second has wrapped. – kim holder Jan 21 '17 at 03:12
  • It wasn't clear exactly what you want, but hopefully the concept of flex item minimum sizing and the link reference lead you to a resolution. Otherwise, feel free to post more details here. – Michael Benjamin Jan 21 '17 at 03:15
  • 1
    I ended up making the image smaller to sidestep the issue. It's too much to fiddle with right now. The material here was helpful though. – kim holder Jan 27 '17 at 23:03
  • 4
    For `flex-direction: column`, I had to use `min-height: auto`. Thank you so much, this saved me :) – Prid Aug 16 '19 at 05:37
  • 2
    As for @Prid , I added a `min-h-0` with tailwindcss to fix an image stretching wider than the parent container. Thank you for this answer. – Nicolas Jan 24 '23 at 23:29
  • Thanks, this helped me solve my problem. The in my flex layout wouldn't shrink, but setting `min-width` to zero allowed it to get smaller. – Ruan Aug 16 '23 at 12:13