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:

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

Updated demo

Share

You may like these posts

• 
  Unable To Create An Html Div Element That Fits To The Text Size
• 
  Element Invisible In Mobile Chrome And Safari
• 
  Chinese Font On The Web Rendering Differently In Different Browsers
• 
  Onclick Drop Down Text With Javascript And Html