equal height divs flexbox

equal height divs flexbox

by John Doe

HTML

<main>
  <ul>
    <li>
    <p>
      quis voluptas iste et reprehenderit ipsum deserunt voluptatem dignissimos placeat sequi optio quia, quidem nam eaque, vero, quam.
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aliquid sunt possimus  placeat sequi optio quia, quidem nam eaque, vero, quam.
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aliquid sunt poss
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum 
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aliquid sunt 
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aliquid sunt possimus quis voluptas iste et reprehenderit ipsum deserunt volupt
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aliquid sunt possimus quis voluptas iste et reprehenderit ipsum deserunt voluptatem dignissimos placeat sequi optio quia, quidem nam eaque, vero, quam.
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aliquid sunt possimus 
    </p>
    </li>
        <li>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aliquid sunt possimus quis voluptas iste et reprehenderit ipsum deserunt 
    </p>
    </li>
  </ul>
</main>

CSS

body{
	padding: 0; 
	margin: 0;
}
ul{
      display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
}
li{
   display: flex;
    float: left;
    padding: 0.625rem;
    width: 25%;
    
}
li p{
      background-color: #fff;
    height: 100%;
    margin-top: 0;
    width: 100%;
}