HTML 필드 세트를 사용하면 어린이가 무기한 확장 할 수 있습니다

Question

fieldset 안에 스크롤 가능한 상자를 넣고 싶지만 주위를 돌면서 자신의 길을 찾아 낼 수 없습니다. 스크롤 할 수있는 div을 fieldset 안에 넣으면 fieldset이 스크롤 가능한 요소 스크롤을 만드는 대신 확장됩니다.

여기에 a test case입니다. 무한정 팽창을 다음 (야유) :

<div style="width: 300px; overflow: hidden;"> 
    <div> 
     <div style="overflow: scroll; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </div> 
</div> 

가 어떻게이 fieldset가 div처럼 행동하는 얻을 수 있습니다 : 예상대로

<div style="width: 300px; overflow: hidden;"> 
    <fieldset> 
     <div style="overflow: scroll; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div> 

그러나 if you use a div, 그것은 (! 만세) 작동?

Answer 1

이 문제에 대한 실행 가능한 해결책이없는 것처럼 보입니다. 실제로 필드 세트를 원한다면 div를 사용하고 필드 세트처럼 보이도록 스타일을 지정할 수 있습니다.하지만 브라우저 간 문제와 두통을 겪을 수 있습니다. 최상의 솔루션 : 필드 세트를 더 이상 사용하지 않도록 양식을 리팩터링하십시오.

Answer 2

나는 당신이 것을 원하는 경우 잘 모르겠지만,이 노력하고 있습니다 :

<div style="width: 300px; overflow: auto;"> 
    <fieldset> 
     <div style="overflow: auto; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div> 

당신은 너무 루트 DIV를 제거 할 수 있습니다, 그것은 여전히 ​​작동합니다.

Answer 3

이게 당신이 쓴거야?

<div style="overflow: auto; width: 300px; height: 55px;"> 
    <fieldset style="overflow: scroll; width: 100%; white-space: nowrap;"> 
     <div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div> 

Answer 4

웹킷과 파이어 폭스는 그 내용의 계산 된 폭을 기반으로 "암시"폭을 갖도록 필드 셋을 제한. 각각을 재정의하는 방법은 다음과 같습니다.

• WebKit은 비교적 쉽습니다. 이 동작은 기본 스타일 시트에 정의되어 있으므로 fieldset에 min-width: 0을 지정하여 재정의 할 수 있습니다. FIELDSET 폭 제약 게코 레이아웃 코드에 깊은 시행되기 때문에

• 파이어 폭스는 강하다 너트입니다. 다행히도 Gecko 전용 규칙을 추가하여 fieldset의 display 속성을 여러 내부 테이블 요소 중 하나에 해당하는 값으로 설정합니다.

는 모두 함께 퍼팅 :

fieldset { min-width: 0; } 

@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */ 
    fieldset { display: table-cell; } 
} 

jsFiddle demo합니다.

---

이은 my answerrelated question (A)에에 기초한다; 파이어 폭스에 대한 픽스와 관련된 브라우저 내부의 정보를 포함하여 더 자세한 설명을 위해이를 참조 할 수 있습니다.

Answer 5

위치를 기억 : 내가 시도는 플렉스 레이아웃을 디버깅 할 때

그래서 그냥