I've been struggling to fix a CSS flex problem for hours. My goal is to make sure that the three boxes in each row have the same height. While I'm familiar with using flex, I suspect that floats may be the root of the issue. Even after clearing them, I couldn't identify any obvious problems. It's very possible that I'm just missing something simple.
Check out the Dev Page with Float Issues
.circle-box-table-container {
width: calc(100% + 42px);
margin: -10px;
overflow: hidden;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.col-xs-12.col-sm-12.col-md-4.circle-box-alt-blue-border {
display: inline-flex;
flex-shrink: 0;
}