Why fieldset inside flex act differently between browsers

问题

I wrote this sample code:

<div style="display:flex;flex-direction:row;width:100%">
    <fieldset style="white-space: nowrap; width:100%; overflow:auto">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis est id posuere pellentesque. Donec sem lacus, consequat id consectetur a, semper in felis. Suspendisse potenti. Nam eu dapibus ex, nec convallis diam. Donec mollis sit amet nunc quis malesuada. Vestibulum semper cursus magna at commodo. Etiam tincidunt enim vel urna tempor dapibus. Praesent posuere nunc lorem, non dignissim ex semper sed. In hac habitasse platea dictumst.</p>
        <p>Fusce molestie sapien a erat laoreet maximus. Phasellus id commodo dolor, pellentesque aliquet lacus. Nunc viverra nec mi nec volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius tellus ante, non tincidunt arcu venenatis ac. Praesent non diam varius, tempus magna sed, bibendum dui. Curabitur lobortis leo tellus, a imperdiet est sodales a.</p>
        <p>Suspendisse elit leo, feugiat in tortor eu, maximus mollis urna. Fusce gravida auctor sapien, ac lacinia diam. In quis nisl diam. Cras blandit elementum ornare. Nunc quam tortor, semper vitae lacinia quis, pulvinar at arcu. Praesent suscipit, urna vitae viverra tempor, eros nisl mollis enim, at lobortis sapien mi et purus. Donec at pretium purus. Praesent auctor turpis vitae massa semper elementum. Fusce tempus turpis sit amet aliquam rhoncus. Donec ligula mauris, accumsan eget consequat viverra, ultrices ac ipsum. Ut maximus convallis magna, id mattis tortor ornare non.</p>
        <p>Suspendisse lacinia mi vel malesuada pretium. Vivamus sagittis vulputate tempus. Mauris feugiat enim et nisl volutpat sollicitudin. Sed eu leo lectus. Donec tempus consequat risus, pharetra tempus urna pharetra non. Aenean vulputate efficitur nisi, non egestas dui faucibus quis. Praesent semper eget neque sed vulputate. Nullam molestie tellus eu malesuada dignissim. Nullam tempus sed elit nec ullamcorper.</p>
        <p>Pellentesque urna lorem, cursus quis tortor sit amet, elementum efficitur elit. Morbi blandit faucibus elit vitae finibus. Morbi neque mi, tincidunt non felis eget, mattis ullamcorper mi. Suspendisse potenti. Maecenas nec metus eu erat scelerisque interdum. Vivamus sit amet interdum dolor, sit amet pellentesque mauris. Morbi vehicula purus ac aliquet dictum. Curabitur lacinia purus id leo commodo pellentesque.</p>
    </fieldset>
</div>

The fieldset width overflow the screen on chrome, but working fine on IE and Firefox.

check this on different browsers: http://jsfiddle.net/hideyatsu/wpe03rs6/

回答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/

回答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.

回答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

来源：https://stackoverflow.com/questions/29559739/why-fieldset-inside-flex-act-differently-between-browsers

标签

html

css

browser

flexbox

fieldset