<section class="flexbox1">
  <div>
    <p>One</p>
  </div>
  <div>
    <p>Two</p>
  </div>
  <div>
    <p>Three</p>
  </div>
  <div>
    <p>Four</p>
  </div>
</section>

<section class="flexbox2">
  <div>
    <p>One</p>
  </div>
  <div>
    <p>Two</p>
  </div>
  <div>
    <p>Three</p>
  </div>
  <div>
    <p>Four</p>
  </div>
</section>

.flexbox1 div {
  background-color: blue;
  color: white;
  margin: 2px;
  width: 100px;
  height: 100px;
}

.flexbox2 div {
  background-color: green;
  color: white;
  margin: 2px;
  width: 100px;
  height: 100px;
}

.flexbox1 {
  display: flex;
}

.flexbox2 {
  display: flex;
}

.flexbox1 p {
  height: 100%;
  margin: 0;
  display: flex;
}

.flexbox2 p {
  height: 100%;
  margin: 0;
  display: flex;
}