Css style works in Safari, but displays different in chrome/safari.Does Flex work differently in Chrome/firefox? what am i missing?

Question

i've been scratching my head all day, not knowing where to look. The first image(left), Safari output is the result i'm expecting, but somehow in Chrome it works differently. My only conclusion is that flex works differently on chrome, but i'm not sure.

I know my css works, because i can get the expected output in safari. I'm hoping someone can point me in the right direction. Any suggestions or links is very much appreciated. thanks.

fieldset.property{ 
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    display: flex; flex-flow: row nowrap;
    border-radius: 5px; border: 1px solid currentcolor;
    margin: 10px 0;
}
fieldset.reference{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    display: flex; 
    flex-flow: column wrap;
    border-radius: 5px; border: 1px solid currentcolor;
    margin: 10px 0;
}

.radio_wrap, .unit_wrap{border: 1px solid yellow;}
fieldset.property .radio_wrap{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    flex: 0 0 30%;
    display: flex; flex-flow: column nowrap;
    align-items: flex-start;
    padding: 15px 0;
}
fieldset.property .unit_wrap{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    flex: auto;
    display: flex; flex-flow: column nowrap;
}

You should post your code. It'll be easier to troubleshoot. Most likely you need to specify nowrap. — Austin Jones, Dec 13 '19 at 13:42
@AustinJones, it does have nowrap, which is the result i'm expecting(left img), which i did get in safari. — Tunasing, Dec 13 '19 at 13:49
Without seeing the css there isn't any we can do but guess. Are you using vendor prefixes? — Austin Jones, Dec 13 '19 at 13:50

score 0 · Answer 1 · answered Dec 13 '19 at 13:47

0

Bro try this

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

Worked for me

answered Dec 13 '19 at 13:47

Amjad Kamboh

32
3

code posted: unit_wrap/radio_wrap are the 2 yellow bordered boxes. – Tunasing Dec 13 '19 at 14:21

score 0 · Answer 2 · answered Dec 14 '19 at 15:25

0

Finally found out what was wrong with my code, long story short, one cannot set fieldset to display:flex. Thanks to all who tried to help.

reference: Why can't <fieldset> be flex containers?

answered Dec 14 '19 at 15:25

Tunasing

31
4

Css style works in Safari, but displays different in chrome/safari.Does Flex work differently in Chrome/firefox? what am i missing?

2 Answers2