flex dynamic height fit image

Question

Need to fit img into dynamically calculated height of li due to flex. Currently it takes all height, and pull height content. Image should just fit into dynamically calculated height of LI, e.g. 50px and fit into it.

No hardcoded height is needed. Page should be 100% in any device. header/footer - flex: 1, main - flex: 3.

body,
ul {
  margin: 0;
  padding: 0;
}

html,
body,
.root {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
}

main {
  flex: 3;
  background: lightyellow;
}

ul {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ul li {
  flex: 1;
  background: aliceblue;
  outline: 1px solid #000;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}

img {
  /* object-fit: contain; */
}

header,
footer {
  flex: 1;
}

header {
  background: lightgray;
}

footer {
  background: lightblue;
}

<div class="root">
  <header>
    HEAD
  </header>

  <main>
    <ul>
      <li>
        <img src="http://via.placeholder.com/200x200" />
        <span>text</span>
      </li>
      <li>
        <img src="http://via.placeholder.com/200x200" />
        <span>text</span>
      </li>
      <li>
        <img src="http://via.placeholder.com/200x200" />
        <span>text</span>
      </li>
    </ul>
  </main>

  <footer>
    FOOTER
  </footer>
</div>

https://jsfiddle.net/sefb3o95/18/

Answer 1

The main thing to make this work is to use Flexbox all the way.

Simply put, one need to nest flex parent/child instead of using height: 100%, to make use of Flexbox's own properties making its flex children stretch/fill their parents, and the reason is that height: 100% is not gonna work properly.

Additionally, having the img as a flex item will cause you some cross browser issues, so wrap it and give it a max-height: 100%, and it will size properly.

See my notes in the CSS. The min-height: 0 fix for Firefox is well explained here:

• Why don't flex items shrink past content size?

---

Updated fiddle

Stack snippet

body,
ul {
  margin: 0;
  padding: 0;
}

html,
body,
.root {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
}

main {
  flex: 3;
  background: lightyellow;
  display: flex;                 /*  added  */
  flex-direction: column;        /*  added  */
  min-height: 0;                 /*  added, Firefox need this  */
}

ul {
  display: flex;
  flex-direction: column;
  min-height: 0;                 /*  added, Firefox need this  */
}

ul li {
  flex: 1;
  background: aliceblue;
  outline: 1px solid #000;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  min-height: 0;                 /*  added, Firefox need this  */
}

img {
  max-height: 100%;              /*  added  */
}

header,
footer {
  flex: 1;
}

header {
  background: lightgray;
}

footer {
  background: lightblue;
}

<div class="root">
  <header>
    HEAD
  </header>

  <main>
    <ul>
      <li>
        <span>
          <img src="http://via.placeholder.com/200x200" />
        </span>
        <span>text</span>
      </li>
      <li>
        <span>
          <img src="http://via.placeholder.com/200x200" />
        </span>
        <span>text</span>
      </li>
      <li>
        <span>
          <img src="http://via.placeholder.com/200x200" />
        </span>
        <span>text</span>
      </li>
    </ul>
  </main>

  <footer>
    FOOTER
  </footer>
</div>