locked
How to get display:flex(flexbox) to work with IE RRS feed

  • Question

  • User668774724 posted

    Hi All,

    I have this div i would like to wrap when the screen size changes but its not working in IE..Its works with firefox and chrome.
    Any ideas what i need to do to let it work in IE

    <style>
    #contacts  {
        display: flex;
        flex-wrap: wrap;
        
      }
      
      #contacts  > div {
        background-color: #f6f7fa;
        width: 300px;
        margin: 10px;
        line-height: 25px;
        font-size: 13px;
        border-style: solid #009ca6;
        border-width: 1px;
         align-items: flex-end; 
      }
      
    </style>   
      
    <div id="contacts">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    </div> </div>

    Tuesday, December 17, 2019 6:26 AM

Answers

  • User1535942433 posted

    Hi naijacoder74,

    Accroding to your description ,I guess that you want to make the div wrap in IE without using flexbox.
    I suggest you could  set inner-block for div. It will display list items horizontally and respect the top and bottom margins/paddings.

    More details ,you could refer to below codes:

    <style>
            .inner {
                display: inline-block;
                width: 300px;
                margin: 10px;
                line-height: 25px;
                font-size: 13px;
                border-style: solid #009ca6;
                border-width: 1px;
                background-color: #f6f7fa;
            }
        </style>
    
     <div id="outer">
                <div class="inner">1</div>
                <div class="inner">2</div>
                <div class="inner">3</div>
                <div class="inner">4</div>
                <div class="inner">5</div>
                <div class="inner">6</div>
                <div class="inner">7</div>
                <div class="inner">8</div>
                <div class="inner">9</div>
                <div class="inner">10</div>
                <div class="inner">11</div>
                <div class="inner">12</div>
            </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 24, 2019 9:58 AM

All replies

  • User303363814 posted

    Can you make your question readable?   Use the preview button to check that what you are writing can be read by other people and that it actually shows what you are asking.

    Tuesday, December 17, 2019 9:52 PM
  • User668774724 posted

    Sorry Paul i know..
    I can't just get it to format properly. Used the insert / Edit code but doesn't work :(

    Tuesday, December 17, 2019 10:48 PM
  • User1535942433 posted

    Hi naijacoder74,

    Accroding to your codes,I created a test demo. It works well.
    As far as I think ,flexbox support IE version 11.0 and later.You could check your IE version.


    IE Download:  https://www.microsoft.com/en-us/download/details.aspx?id=41628

    Best regards,

    Yijing Sun

    Wednesday, December 18, 2019 10:03 AM
  • User753101303 posted

    Hi,

    Use F12 to see if IE is in "edge" mode rather than in some legacy mode. I would also add some content inside the div tag. Else I'll have to give to a try to see if it seems ok in IE11...

    Wednesday, December 18, 2019 10:12 AM
  • User668774724 posted

    Thanks Sun

    I have it set to 11. Click link below

    https://ibb.co/7X4qfWK

    But still doesn't work.
    Is there any particular css for flexbox for IE?

    Thanks in Advance

    Thursday, December 19, 2019 12:08 AM
  • User668774724 posted

    Thanks but its not in Edge mode but in IE mode

    see link below

    https://ibb.co/7X4qfWK

    Also should it be working on Edge?

    Thursday, December 19, 2019 12:09 AM
  • User668774724 posted

    Actually tested it in IE and it worked as expected but not in IE
    See m IE version here

    https://ibb.co/TMRTLj1

    Thanks

    Thursday, December 19, 2019 12:33 AM
  • User668774724 posted

    Hi Yijing,
    See my IE version here



    https://ibb.co/TMRTLj1

    Thanks

    Thursday, December 19, 2019 10:56 PM
  • User303363814 posted

    The code you have shown displays nothing, in all browsers.  There is no content.  It seems to show nothing perfectly in IE 11 for me.

    Can you add some content and show us the layout that you see and the layout you are expecting to see?

    Friday, December 20, 2019 1:09 AM
  • User-474980206 posted

    IE is a real pain.

    You need to be sure when accessing your site, IE 11 is in EDGE mode not IE mode. The typical default is IE mode for intranet sites, so you need to configure this. Another issue is if you company is using enterprise mode. If it is, then you need to add your site to the excluded  site list, as there is no override for this.

    Friday, December 20, 2019 4:37 PM
  • User668774724 posted

    Thanks Bruce.
    I need to figure how i can make it work in IE maybe without using FlexBox?
    Any idea?

    Tuesday, December 24, 2019 12:34 AM
  • User303363814 posted

    ow i can make it work

    Can you explain what "it" is?  What are you trying to achieve?

    Tuesday, December 24, 2019 1:40 AM
  • User1535942433 posted

    Hi naijacoder74,

    Accroding to your description ,I guess that you want to make the div wrap in IE without using flexbox.
    I suggest you could  set inner-block for div. It will display list items horizontally and respect the top and bottom margins/paddings.

    More details ,you could refer to below codes:

    <style>
            .inner {
                display: inline-block;
                width: 300px;
                margin: 10px;
                line-height: 25px;
                font-size: 13px;
                border-style: solid #009ca6;
                border-width: 1px;
                background-color: #f6f7fa;
            }
        </style>
    
     <div id="outer">
                <div class="inner">1</div>
                <div class="inner">2</div>
                <div class="inner">3</div>
                <div class="inner">4</div>
                <div class="inner">5</div>
                <div class="inner">6</div>
                <div class="inner">7</div>
                <div class="inner">8</div>
                <div class="inner">9</div>
                <div class="inner">10</div>
                <div class="inner">11</div>
                <div class="inner">12</div>
            </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 24, 2019 9:58 AM
  • User668774724 posted

    Thanks yij for the reply.
    But he i try your snipped code..
    This is what i i see below as supposed to what you posted

    1

    2

    3

    4

    5

    6

    7

    9

    10

    11

    12

    Monday, January 6, 2020 2:59 AM
  • User303363814 posted

    Show your code

    Monday, January 6, 2020 10:46 PM
  • User668774724 posted

    Hi Paul,
    As above

    <style>
            .inner {
                display: inline-block;
                width: 300px;
                margin: 10px;
                line-height: 25px;
                font-size: 13px;
                border-style: solid #009ca6;
                border-width: 1px;
                background-color: #f6f7fa;
            }
        </style>
    
     <div id="outer">
                <div class="inner">1</div>
                <div class="inner">2</div>
                <div class="inner">3</div>
                <div class="inner">4</div>
                <div class="inner">5</div>
                <div class="inner">6</div>
                <div class="inner">7</div>
                <div class="inner">8</div>
                <div class="inner">9</div>
                <div class="inner">10</div>
                <div class="inner">11</div>
                <div class="inner">12</div>
            </div>
    Thursday, January 9, 2020 4:53 AM
  • User1535942433 posted

    Hi naijacoder74,

    Could you tell us if it works in other Browser?

    I suggest you could press F12 and see check the styles are same with  you wrote.Or you could clear cache and rerun.

    Just do this:

    Best regards,

    Yijing Sun

    Friday, January 10, 2020 3:24 AM
  • User1258137967 posted

    Hello everyone, I am new here. Interesting question, thanks for the information. 

    Wednesday, January 15, 2020 9:53 AM
  • User668774724 posted

    Sorry for the late response yij.

    I had to use javascript as it just didn't work for some reason (Maybe something else was overriding it)
    Thanks for your advice.

    Monday, February 3, 2020 10:40 PM