Why Fieldset Inside Flex Act Differently Between Browsers

I wrote this sample code:

Solution 1:

On Chrome the <fieldset> is given a min-width equal to the width of the content. You can remove this by putting in min-width: 0px; in the <fieldset> style.

http://jsfiddle.net/wpe03rs6/2/

Solution 2:

You can put chrome hack css something like this:

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    #element { properties:value; } 
}

may be this will help you.

Solution 3:

Try like this: Demo

body {
    overflow-x:hidden;
}

HTML:

<div style="white-space: nowrap; width:100%; overflow:auto;display:block">
    <fieldset>...  </fieldset></div>

Updated demo

Share