CODEWITHSUNDEEP
cssflexbox
linuxgx
linuxgx

Reputation: 389

Having some trouble with CSS Flex Row as well as Table / Table Cell

I've been trying to debug a CSS flex issue for a few hours. I need the three boxes in each row to have the same height. I've used flex quite a few times and think it might be an issue with floats but clearing them didn't seem to solve any obvious issues. It's likely that I'm overlooking something very simple.

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;
}

Upvotes: 0

Views: 51

Answers (1)

NIKHIL CHANDRA ROY
NIKHIL CHANDRA ROY

Reputation: 1087

I see you used height 100% inside your box. you need to modify some css,

.circle-box-content-text{
height: auto;
}

.circle-box-content-heading{
height: auto;
}

.circle-box-content-containter{
height: 100%;
}

do this way, hope your height issue will fix.

Upvotes: 1

Related Questions