I'm facing an issue with Bootstrap 4 columns in a row, where I have variable widths on the columns causing slight discrepancies in how they are displayed. While Chrome handles this well, Internet Explorer seems to align the last two columns based on "n times min-width" rather than their actual max-width size, resulting in misalignment.
I've tried using margin-left: auto and margin-right: auto to center the boxes, but it ends up pushing the last box outside the row entirely. Splitting the columns into separate rows isn't an option due to varying screen widths displaying different numbers of items in each row.
Is there a CSS solution to properly center these columns in Internet Explorer?
* {
box-sizing: border-box;
}
.container {
width: 100%;
border: 1px dotted yellow;
}
.row {
width: 100%;
border: 1px dotted red;
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.col {
min-width: 25%;
max-width: 33.3%;
border: 1px dotted blue;
height: 100px;
flex-basis: 0;
flex-grow: 1;
margin-bottom: 5px;
}<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>Using fixed widths for the columns works fine, but requires manual adjustment for affected columns or post-calculation with JavaScript. This is not ideal. I haven't found a CSS selector that targets columns without a full width, except by precalculating a modulo value and storing it in a data attribute, which isn't satisfactory either. I'm hoping for a pure CSS solution within the existing structure.
* {
box-sizing: border-box;
}
.container {
width: 100%;
border: 1px dotted yellow;
}
.row {
width: 100%;
border: 1px dotted red;
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.col {
min-width: 25%;
max-width: 33.3%;
border: 1px dotted blue;
height: 100px;
flex-basis: 0;
flex-grow: 1;
margin-bottom: 5px;
}
.col.bigger {
min-width: 33.3%;
}<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col bigger"></div>
<div class="col bigger"></div>
</div>
</div>