为什么 flex 中的字段集在浏览器之间的行为不同答案

【问题标题】：Why fieldset inside flex act differently between browsers为什么 flex 中的字段集在浏览器之间的行为不同
【发布时间】：2015-06-16 01:44:37
【问题描述】：

我写了这个示例代码：

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

字段集宽度在 chrome 上溢出屏幕，但在 IE 和 Firefox 上工作正常。

在不同的浏览器上查看：http://jsfiddle.net/hideyatsu/wpe03rs6/

【问题讨论】：

标签： html css browser flexbox fieldset

【解决方案1】：

你可以把 chrome hack css 放在这样的地方：

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

也许这会对你有所帮助。

【讨论】：

【解决方案2】：

在 Chrome 上，<fieldset> 的 min-width 等于内容的宽度。您可以通过在 <fieldset> 样式中输入 min-width: 0px; 来删除它。

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

【讨论】：

【解决方案3】：

试试这样：Demo

body {
    overflow-x:hidden;
}

HTML：

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

更新demo

【讨论】：