Bootstrap 4 grid | variable - fixed - variable | width column, overlaps on IE11

Question

Bootstrap 4 grid problem IE11 with one fixed width column

I have a three column grid where the middle column must be a fixed width, the left and right columns can be variable/wrap.

Code is below, used my own class for the row wrapper. Bootstrap is 4.1.1

<div class='centered_content'>

      <div class="row">

        <div class="col-md">
           variable width content
        </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">
            variable width content
        </div> 

      </div> 

</div> 




.centered_content {
  max-width:1130px; 
  margin: auto;
}

The problem is that in IE11 (and the 'Internet' browser on an Android 4 tablet) when resizing the browser between the max width of 1100 to approx 800px (just before the small breakpoint), the right column overlaps with the middle one. On other browsers, the left and right columns shrink enough to allow the middle maintain its fixed width.

Images below illustrate this. The first shows how it looks with browser maximised on IE (and all other browsers), the second pic shows Chrome with a reduced width (the desired behaviour) and the last pic shows IE reduced in width

I know IE does not fully support flex so guess that may be the issue. Edge works as per Chrome. Any workarounds?

Answer 1

Not sure I want to write an answer for this one; but bootstrap 4 uses Flex (as you mentioned compatibility): IE 11 and android 4 are technically ancient technologies that are abandoned however I feel your frustration that IE 11 still shows up in my logs ... there's honestly too much work to go into IE 11 than it's worth as of (2018), as for @NiMusco's suggestion, not really a media query as it get's too complicated but a JS powered injection for CSS just for IE 11 is the only goto I can see; which is still bad practice.

Detecting IE11 using CSS Capability/Feature Detection

If you need more browser compatibility revert back to bootstrap 3 with regular html, floating and clearing (even though it's still not perfect it does still work in IE11)

Good luck, but I'd suggest giving up on IE <= 11, since microsoft did