JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

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;
}