CODEWITHSUNDEEP
htmlcssflexbox
Occam
Occam

Reputation: 543

Nested flexbox does not shrink

I am trying to get a variable number of square images to fill up a parent container. I need the images to grow or shrink in size responsive to ensure that they all fit, but never expand beyond the size of the the parent container horizontally and vertically. Image ratio also needs to be preserved without cropping.

I am trying to use nested flex-boxes to accomplish this. The .outer-flex-container is working as expected with everything shrinking/growing along the horizontal axis while maintaining the aspect ratio.

With the .inner-flex-container I am trying to get the same results, but along the vertical axis (flex-flow: column). However when you shrink the container size, you get images that do not shrink (or distort the aspect ratio).

I have read through numerous posts about using min-height: 0 to override the default min-height: auto however this does not seem to solve my problem.

Why does the .inner-flex-container not shrink to the size of the container? Is there a better approach than flexbox to accomplish this?

.outer-flex-container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 900px;
  height: 500px;
}

.outer-flex-container:hover {
  width: 500px;
  height: 100px;
}

.outer-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
}

.inner-flex-container {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid grey;
  min-height: 0;
  min-width: 0;
  /* max-height: 100%;  <-- Distorts aspect ratio */
  /* max-width: 100%; <-- Distorts aspect ratio */
}

.inner-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  max-width: 100%;
  opacity: 0.5;
}
<div class="outer-flex-container">
  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.sstatic.net/QH01k.png' />
    </div>
  </div>

  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.sstatic.net/QH01k.png' />
    </div>
  </div>

</div>

Upvotes: 3

Views: 1861

Answers (1)

kukkuz
kukkuz

Reputation: 42352

You can nest flexboxes a bit more:

  • make your outer-flex-child a flexbox too and add flex: 0 1 auto to its flex item (inner-flex-container).

  • and because your inner-flex-container is a column flexbox add align-items: flex-start to override the default stretch beahvior (align-items: stretch) that breaks the aspect ratio of the image flex item.

See demo below: 

.outer-flex-container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 900px;
  height: 500px;
}

.outer-flex-container:hover {
  width: 500px;
  height: 100px;
}

.outer-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex; /* added */
}

.inner-flex-container {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid grey;
  min-height: 0;
  min-width: 0;
  flex: 0 1 auto; /* added */
  align-items: flex-start; /* added */
}

.inner-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  max-width: 100%;
  opacity: 0.5;
}
<div class="outer-flex-container">
  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.sstatic.net/QH01k.png' />
    </div>
  </div>

  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.sstatic.net/QH01k.png' />
    </div>
  </div>

</div>

Upvotes: 1

Related Questions