요소가 flexbox 컨테이너보다 큰 경우 스크롤 막대가 표시되지 않습니다.

Question

요소를 수직으로 정렬하는 데 Flexbox를 사용할 수 있습니다. 그러나 수직 정렬 요소가 나중에 커지면 플렉스 박스 컨테이너의 경계를 벗어날 수 있습니다. 이는 요소에 overflow:auto이 사용되는 경우에도 발생합니다.

다음은 예상과 실제 결과가 담긴 데모입니다.

데모 사용 :

1. Open the demo
2. 가 회색 상자에 텍스트를 많이 입력을

예상 결과 :

단락 텍스트이기 때문에 키가된다 입력되었습니다. 단락이 flexbox 컨테이너만큼 큰 경우 단락이 커지지 않고 세로 스크롤 막대가 표시됩니다.

실제 결과 :

단락 텍스트를 입력으로 키가되고,하지만 결코 성장하지 중지합니다. 궁극적으로 flexbox 컨테이너의 범위를 벗어납니다. 스크롤바는 표시되지 않습니다.

기타 사항 :

대신 컨테이너에 overflow:auto을 넣어 유혹하지만 예상대로 작동하지 않습니다. 그것을 밖으로 시도하십시오. 많은 텍스트를 입력 한 다음 위로 스크롤하십시오. 위쪽 채우기가 사라지고 텍스트 줄이 누락되어 있습니다. 에서

Answer 1

줄 필요가 :

1. "최대 높이 : 100 %"를 추가 <p>에 요소를 무기한 증가시키지 않도록합니다. 유지하려는 경우

2. 은 <p>에 padding, 당신은 도의 패딩을 얻을 수 box-sizing: border-box를 설정할 필요는 max-height에 포함되어 있습니다.

(기술적으로 box-sizing:padding-box 당신이 원하는,하지만 크롬이 지원하지 않습니다. 테두리가 없기 때문에이 패딩 박스와 같은 때문에, border-box 할 것, 그래서)

Here's your JS Fiddle with this fix

Answer 2

당신의 css 당신은 당신이 다음을 수행 할 필요가 height

p { 
    padding: 20px; 
    width: 100%; 
    background-color: #ccc; 
    outline: none; 
    height: 60px; 

} 

JS Fiddle