수평 스크롤 : 테이블 요소

Question

내가 가진이 같은 간단한 페이지 레이아웃 :

CSS :

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.table-wrapper { 
    display: table; 
    width: 1366px; 
    height: 100%; 
} 

.cell-left { 
    display: table-cell; 
    width: 240px; 
} 

.cell-right { 
    display: table-cell; 
    width: 1126px; 
} 

HTML :

<div class="table-wrapper"> 
    <div class="cell-left"></div> 
    <div class="cell-right"> 

    /* Some really long content */ 

    </div> 
</div> 

때 .cell 오른쪽에있는 내용 브라우저가 세로 스크롤 막대를 표시 할만큼 충분히 길어지면 가로 레이아웃 스크롤 막대가 추가되어 실제로 내 레이아웃이 손상됩니다. .table-wrapper에 100 % 너비를 넣으면 문제가 사라지지만 원하지 않는 두 셀을 축소합니다. 나는 프로젝트가 요구하는 반응 형 디자인을위한 적절한 비틀기를하기 위해 3 가지 요소 모두에 고정 폭을 가져야한다. 또한 두 셀 모두 문서 높이에 걸쳐 있어야합니다.

재미있는 점은 Internet Explorer 11에는이 문제가 없지만 Firefox와 Chrome은 모두 그렇습니다. 가로 스크롤 막대가 나타나지 않도록하려면 어떻게해야합니까?

편집

은 내가 1366x768 배경의 화면 해상도에서이 테스트를하고있어 것을 추가하는 것을 잊었다. 자신의 화면 해상도에서 직접 테스트 해 보려면 숫자를 변경하십시오. 여기

http://fiddle.jshell.net/zddm6asz/1/show/

을 1920x1200의 또 다른 하나입니다 :

다음은 바이올린의

http://fiddle.jshell.net/zddm6asz/2/show/

Answer 1

편집 :이 작업을 시도하기 전에,이 답변에서 내 첫 코멘트를 참조하십시오.

당신이 .cell-left 및 .cell-right에 대한

overflow-x: hidden; 

추가하는 경우, 다음이 수평 스크롤을 얻기에서 세포를 방지해야한다.

Answer 2

display : table-cell을 사용할 때 나타나는 가로 스크롤 막대와 동일한 문제가있었습니다. 일부 요소의 경우. 스크롤 막대가 전체 페이지에 적용되었지만 오버플로 적용 : 숨김; 이러한 세포의 수용 요소에 문제가 해결되었습니다. 귀하의 경우 오버플로를 적용 할 것입니다 : 숨겨진; .table-wrapper.

또한 테이블 너비에 픽셀 너비를 설정하지 않을 수도 있습니다. 가능한 경우 최대 너비로 백분율로 설정하지 않는 이유는 무엇입니까? 반응 형 디자인을 시도하는 경우 특히 그렇습니다.