Flexbox not working in Chrome

Asked Mar 12 '17 at 18:28

Active Mar 12 '17 at 18:43

Viewed 22 times

I have a basic flexbox situation for chrome in scss in order to align some items in a form. I have stripped it down in order to get what is happening

fieldset{

    &.fullname{
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row; 
        flex-direction: row;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        background:pink;
        width:100%;
        min-height:2em;

        label{
            width:45%;

            &:first-child{
                margin-right:10px;
            }
        }
    }
}

HTML

    <fieldset class="fullname">

        <label>item 1</label>
        <label>item 2</label>
    </fieldset>

This works absolutely fine in Firefox but for some reason chrome (version 56) is not having it and only makes the label items stack over each other instead of side by side.

What is wrong with the code above?

edited Mar 12 '17 at 18:43

Michael Benjamin

346,931
104
581
701

asked Mar 12 '17 at 18:28

HGB

2,157
8
43
74

1

Add a wrapper between the fieldset and its children, fieldset won't work as a flex container – Asons Mar 12 '17 at 18:43
that fixed it! I would have never guessed. Thanks – HGB Mar 12 '17 at 19:47
1

Hours and hours I've been trying to solve this. Thanks @LGSon – Eoin Jun 17 '17 at 11:24

Flexbox not working in Chrome

0 Answers0