fieldset width 부모의 100 %

Question

필드 세트 내에 스크롤 가능한 div가 있어야합니다. 내 문제는 필드 집합을 부모와 함께 머물지 않고 콘텐츠 너비로 확장한다는 것입니다.

<div class="section"> 
    <fieldset> 
     <div class="list"> 
     </div> 
    </fieldset> 
</div> 

http://jsfiddle.net/UziTech/tg5uk25L/

는 두 개의 상자가 모두 바닥에 스크롤을해야하지만이 오버 플로우를 제어하지 않도록 상단 하나는 FIELDSET입니다.

어떻게 필드 집합을 부모와 동일하게 만듭니 까?

Answer 1

브라우저는 fieldset 요소에 대한 기본 스타일 시트에 정의 CSS를 가지고있다.

크롬에 그것은 min-width: -webkit-min-content;

있습니다 당신은이 규칙을 설정할 수 있습니다 :

http://jsfiddle.net/tg5uk25L/4/

아소 방화범, 크롬 개발 도구와 요소를 검사 :

.section fieldset{ 
    min-width: 0; 
} 

이 바이올린 참조 y에있는 과 fieldset 요소의 차이점을 확인하십시오. 우리 스타일 시트! 당신의 jsfiddle에서

Answer 2

.section에 overflow: scroll을 그냥 설정하십시오. 오버플로가 포함되고 스크롤 막대가 추가됩니다.

.section { 
    width: 100%; 
    border: 10px double; 
    box-sizing: border-box; 
    overflow: scroll; <---- 
} 

FIDDLE

Answer 3

, 아마 당신은이 빠른 수정

.section { 
    width: 100%; 
    border: 10px double; 
    box-sizing: border-box; 
    overflow-x: auto; 
} 

td { 
    padding: 0 100px; 
    border: 1px solid; 
} 

http://jsfiddle.net/oussamaelgoumri/meqvbjf1/