Dealing with Bootstrap 4 grid challenge in IE11 when using a fixed width column
I am working on a three-column grid where the middle column needs to have a fixed width, while the left and right columns are flexible/wrappable.
Here is the code snippet I have created, including my own class for the row wrapper. The version of Bootstrap being used is 4.1.1
<div class='centered_content'>
<div class="row">
<div class="col-md">
content with variable width
</div>
<div class="col-md m d-none d-md-block ">
Fixed width content
</div>
<div class="col-md l d-none d-md-block">
content with variable width
</div>
</div>
</div>
.centered_content {
max-width:1130px;
margin: auto;
}
The issue arises specifically in IE11 (as well as in the 'Internet' browser on an Android 4 tablet) when resizing the browser window from the maximum width of 1100 to around 800px (just before reaching the small breakpoint). At this point, the right column starts overlapping with the middle one in IE, whereas other browsers adjust the left and right columns to accommodate the fixed width of the middle column.
The images below provide visual representation of this problem. The first image demonstrates the appearance of the layout when the browser is maximized in IE (and all other browsers), the second image shows Chrome functioning correctly with reduced width (desired behavior), and the third image showcases the issue with IE at a reduced width.
I understand that IE doesn't fully support flex, which could be causing the problem. Edge behaves similarly to Chrome. Are there any potential workarounds for this issue?
https://i.sstatic.net/RSwFS.png