Within the div I have a button enclosed in the following structure:
HTML:
<div class="parent-container">
<div class="child child-1 col-xs-6">
<button class="btn btn-primary">Customize Feed</button>
</div>
<div class="child child-2 col-xs-6">
<button class="btn btn-default">Really Really Really Really Really Really Long CTA text</button>
</div>
</div>
CSS:
.parent-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.child-1 {
order: 2;
}
.child-2 {
order: 1;
}
.child button {
height: 100%;
white-space: normal;
}
.child button {
width: 100%;
}
Regardless of the text length, both buttons (long and short) should have the same height. This works well on all browsers except for Safari on macOS.
Issue Screenshot (from the demo):