JSFiddle - React, Tailwind, and code Playground

HTML

<div id="big_container">

      <div class="little_container">
          <figure>
            <img src="http://placekitten.com/500/440">
            <figcaption>
              I has kitty!!
            </figcaption>
          </figure>
      </div>
      
      <div class="little_container">
          <figure>
            <img src="http://placekitten.com/450/400">
            <figcaption>
              moar kitty!
            </figcaption>
          </figure>
      </div>
      
      <div class="little_container">
          <figure>
            <img src="http://placekitten.com/300/440">
            <figcaption>
              I has too many kitty. but I still need moar. Oh! No!!!!! I cannot get enuf!
            </figcaption>
          </figure>
      </div>
    </div>

CSS

#big_container {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding-bottom: 40px;
  display: flex;
  flex-flow: horizontal;
  align-items: flex-start;
  justify-items: space-around;
  flex-wrap: no-wrap;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
}

.little_container {
  display:inline-block;
  height:100%;
  min-width: 100vw;
  text-align:center;
  display: flex;
  flex-flow: vertical;
  align-items: center;
  justify-content:center;
  flex-direction: column;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-direction: column;
  -ms-flex-pack: start;
  -ms-flex-align: center;
 
}


figure {
  width: -moz-min-content;
  width: -webkit-min-content;
  position: relative;
  text-align:center;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  align-items: stretch;
  justify-content:center;
  margin:auto;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  -ms-flex-line-pack: center;
}

figure img {

  display:block;
  text-align:left;
  box-sizing: border-box;
  margin:0;
  max-height:calc(100% - 40px); /* subtract height of caption */
  -ms-flex: 0 0 calc(100%-40);
  display: block;
  
}

figcaption {
  display:block;
  text-align:left;
  box-sizing: border-box;
  margin:0;
  padding:10px;
  line-height:20px;
  background-color:#ddd;
  -ms-flex: 1 1 60%;
  max-width: 100%;
 
}