Width not wrapping in IE11

Question

In case if IE11 width is not proper. In case of Chrome the width is proper and content is wrapped. There is no scroll bar in case of Chrome, but in IE11 the content did not wrap.

Expected: there should not be a scroll bar

   .modal-scroll-panel{
     position:static;
     overflow:auto;
     margin:auto;
     max-width:772px!important;
     max-height:532px!important;
    }
    .width-class{
      width:55%;
    }
    .parent{
      display:flex;
      width:100%;
      flex-flow:column wrap;
    }
    .parent > .item-1{
      display:flex;
      flex-direction:column;
      width:100%;
    }
    .parent > .item-1 > .child-1{
      flex:none;
      width :100%;
    }

    <div class = "modal-scroll-panel">
      <table>
        <tbody>
          <tr>
            <td class ="width-class">
              <div class = "parent">
                <div class = "item-1">
                  <div "child-1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.   
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

another amazing this is if i remove css related to flex it start to work(scroll bar is not there and content is properly wrapper.) — Vishal Patil, Jan 28 '19 at 11:24
Want to understand what is the root cause why in case of flex the parent divs width is not proper(more). — Vishal Patil, Jan 28 '19 at 11:25
Possible duplicate of [display: flex not working on Internet Explorer](https://stackoverflow.com/questions/43979702/display-flex-not-working-on-internet-explorer) — Studio KonKon, Jan 28 '19 at 11:49
@StudioKonKon,can you point out exact issue.This is a generic statement — Vishal Patil, Jan 28 '19 at 11:50
Not directly, `display: flex;` while it can be used, it isn't fully supported in IE11 and where it is used it's **very buggy**. There are workarounds but then while it'll be fine in IE11 you'll then have problems on Chrome and Firefox. IE11 isn't properly setting the `height` and if you add a `height` property then vertical aligning may stop working or you can set a fixed width. — Studio KonKon, Jan 28 '19 at 12:00
Related: **[Flexbugs](https://github.com/philipwalton/flexbugs)** — FelipeAls, Jan 28 '19 at 13:39
Related: [Text in a flex container doesn't wrap in IE11](https://stackoverflow.com/q/35111090/3597276) — Michael Benjamin, Jan 28 '19 at 18:13

score 1 · Answer 1 · answered Jan 28 '19 at 11:58

1

flex-wrap doesn't work with width: 100% on IE. If you'll change it to max-width:772px for example, it will work.

.parent{
  display:flex;
  max-width:772px;
  flex-flow:column wrap;
}

answered Jan 28 '19 at 11:58

Itay Gal

10,706
6
36
75

Width not wrapping in IE11

1 Answers1