IE11 display:flex issue

    <div id="body">
       <div id="content" class="content" style="margin-left: 279.888888835907px; width:    auto;display: flex;overflow-x: visible !important;">
         <div id="code-snippet-6" class="codeSnippetContainer" xmlns="">
           <div class="codeSnippetContainerCodeContainer">
             <div id="CodeSnippetContainerCode_b0bbbb62-0746-482f-a936-2972991ae9b9" class="codeSnippetContainerCode" dir="ltr">
                <div style="color:Black;">
                  <pre style="overflow:auto">[<span style="color:Blue;">assembly</span>: InternalsVisibleTo(<span style="color:#A31515;">"FileSystem.Fakes, PublicKey=0024000004800000940000000602000000240000525341310004000001000100e92decb949446f688ab9f6973436c535bf50acd1fd580495aae3f875aa4e4f663ca77908c63b7f0996977cb98fcfdb35e05aa2c842002703cad835473caac5ef14107e3a7fae01120a96558785f48319f66daabc862872b2c53f5ac11fa335c0165e202b4c011334c7bc8f4c4e570cf255190f4e3e2cbc9137ca57cb687947bc"</span>)]</pre>
               </div> 
             </div>
           </div>
        </div>
       </div>
    </div>


 Above markup behaved differently across chrome and IE11, for the Chrome one, the code snippets in the page still have scrolling bar in them, but for the IE, the code snippet scrolling bar has completely gone.
    Does anyone know why it's happening?