CSS 만 사용하여 스크롤 가능한 크기 조정 가능 열

Question

포장하지 않아야 미리 서식이 지정된 텍스트가있는 열을 사용하여 유연한 레이아웃을 만들려고합니다. 내 문제는 스크롤 가능한 컨테이너 너비를 콘크리트 폭 값으로 설정 한 경우에만 열의 스크롤 막대가 나타나고 %는 작동하지 않는 것입니다. 그렇게하면 주위의 열은 여전히 ​​브라우저 윈도우에서 올바르게 크기가 조정되지만 컨테이너의 너비는 고정 될 때 그에 따라 변경되지 않습니다.

이 훌륭한 튜토리얼은 열 만들기에 많은 도움이되었지만 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks 크기 조정이 가능한 콘텐츠를 기반으로 제작되었습니다.

순수 CSS가있는 열과 함께 스크롤 된 컨테이너의 크기를 조정할 수있는 방법이 있습니까?

Answer 1

내가 생각하는 당신은 아마 스크롤하여 오버 플로우를 설정할 수 있으며, 그 폭 설정 p 내부 또는 다른 요소에 다음, 왼쪽 컨테이너에 overflow: scroll을 설정

Answer 2

문제를 해결합니다

#container1{ 
    overflow: scroll; 
} 
#container1 #coll p{ 
    width: 700px; 
} 

Answer 3

나는 이미 overflow:auto을 사용하고 있지만, 나의 수레는 항상 그들의 내용만큼 많은 공간을 차지했다. 이로 인해 열이 화면 크기 이상으로 확장되었습니다.

나는이 SO 질문에 대한 답을 발견 force a div to contain floated child divs

기본적으로 내가 내 컨테이너가 떠내려 요소를 포함하고 붕괴 방지했습니다. http://jsfiddle.net/zfsjb/1/

<style> 
    #main { 
    clear: both; /* Contain floating elements */ 
    background-color: red; 
    } 

    #main:after { /* Prevents the collapsing of the containing element. */ 
    content: "."; 
    clear: both; /* */ 
    display: block; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
    } 

    #primary { 
    float: left; 
    margin: 0; 
    width: 20%; 
    background-color: yellow; 
    } 
    #secondary { 
    float: left; 
    width: 80%; 
    background-color: blue; 
    } 
</style> 
<div id="main"> 
    <div id="primary">Primary</div> 
    <div id="secondary">Secondary</div> 
</div>