JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<div class="flex-container">
  <div class="flex-child">
    <img src="https://via.placeholder.com/100">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quia quaerat ullam, quasi facere odio suscipit explicabo ipsa libero esse. Consequatur harum quibusdam at earum magnam obcaecati, quod, illum aut?</p>
  </div>
  <div class="flex-child">
    <img src="https://via.placeholder.com/150">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quia quaerat ullam, quasi facere odio suscipit explicabo ipsa libero esse. Consequatur harum quibusdam at earum magnam obcaecati, quod, illum aut?</p>
  </div>
  <div class="flex-child">
    <img src="https://via.placeholder.com/150">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quia quaerat ullam, quasi facere odio suscipit explicabo ipsa libero esse. Consequatur harum quibusdam at earum magnam obcaecati, quod, illum aut?</p>
  </div>
</div>

CSS

.flex-container {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.flex-child {
  border: 1px solid blue;
  display: flex;
  // percentage based height causes parent to collapse in iOS Safari/Chrome
  height: 100%; 
}