CodePen Embed - Margin and Padding interop issue: flexbox

<div class="flex1">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

.flex1 {
  border: 2px solid rgb(140,157,173);
  width: 500px;
  height: 300px;
  display: flex;
}

.flex1 > * {
  background-color: rgb(197,127,129);
  margin: 0 10% 50% 0;  
}

This Pen is owned by Rachel Andrew on CodePen.

See more by @rachelandrew on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.