Почему FIELDSET внутри гибкого действуют по-разному между браузерами

Question

Я написал этот пример кода:

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

В Fieldset ширина переполнению экрана на хроме, но работает отлично на IE и Firefox.

проверить это на разных браузерах: http://jsfiddle.net/hideyatsu/wpe03rs6/

Answer 1

На хром <fieldset> предоставляется min-width, равный ширине содержимого. Вы можете удалить это, поставив min-width: 0px; в стиле <fieldset>.

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

Answer 2

Вы можете поставить хромированную хак CSS что-то вроде этого:

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

может быть, это поможет вам.

Answer 3

Попробуйте так: Demo

body { 
    overflow-x:hidden; 
} 

HTML:

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

Обновлено demo