플렉스 박스 미스터리 축소

Question

나는 블럭 레벨 형제 3 개, 헤더, div site-content 및 푸터로 구성된 웹 사이트를 운영하고 있습니다. site-content 사업부가 flex-grow: 1입니다

display: flex; 
flex-direction: column; 
height: 100%; 

센터 :

나는 나의 body 태그로 그래서 인 flexbox로 설정해야합니다.

이것은 잘 동작하고 있으며,이 레이아웃을 제공합니다 (점선 상자는 화면의 보이는 부분에 무엇을 보여 주는지 보여줍니다. 페이지가 스크롤해야합니다). 나는 일부 페이지에이 site-content 사업부의 수직 수평/중앙에 상자를 추가 할 수 있기 때문에

내 문제가 발생합니다. 그래서,이 상자에 대한 div를 생성하고이에 site content 설정 :

.site-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    } 

그리고 다음 site-content이 즉시에 붕괴 DIV :

가 바닥 글에 머물고 대신 최대 타기를 바닥. 이런 젠장?

무엇이 더 실망 스럽습니까? simple codepen reconstruction이 문제없이 작동하므로 ...이 문제의 원인을 파악하는 데 문제가 있습니다. 당신이 body 요소에 display: flex을 제공하는 경우

Answer 1

당신은 또한과 같이 html을 포함 할 수있다 : https://jsfiddle.net/nrwa33ry/2/

body,html { 
    margin:0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}