Nested display:flex breaks text wrapping in IE 11

[BrianHicks]

Looks like using layout elements like row and column makes nested elements with display: flex. This breaks IE11. Silly IE. Here's the thread I found that explains this: https://stackoverflow.com/questions/23978986/flexbox-wrap-flex-items-in-ie11-broken

And an SSCCE (well not mininal, but enough to demonstrate the problem.) If I change the innermost column to el things magically work.

module SSCCE exposing (..)

import Color
import Element exposing (..)
import Element.Attributes exposing (..)
import Html exposing (Html)
import Style exposing (..)
import Style.Border as Border
import Style.Color as Color
import Style.Font as Font


type Styles
    = None


styleSheet =
    Style.stylesheet
        [ style None
            [ Color.border Color.black
            , Border.all 1
            ]
        ]


main =
    viewport styleSheet <|
        column None
            [ padding 10 ]
            [ column None
                [ center
                , width (px 400)
                ]
                [ text "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." ]
            ]

This renders in IE11 like so:

[mdgriffith]

As you brought up in the slack(and as a note for myself), this can be fixed if there is an intermediate div between two elements that have display: flex

[BrianHicks]

quite! For the sake of capturing here, this is what I have in my code now:

{-| IE11 doesn't like it when you nest elements with `display: flex` (it breaks text
flowing.) The solution here is to wrap elements that need reflowing _and_
nesting in a separate element with `display: block`. It's a bit silly but it works.
-}
ie11fix : style -> Element style variation msg -> Element style variation msg
ie11fix none child =
    el none [] child

The SSCCE would be modified like so:

main =
    viewport styleSheet <|
        column None
            [ padding 10 ]
            [ ie11fix None <| column None -- TADA!
                [ center
                , width (px 400)
                ]
                [ text "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." ]
            ]