Flexbox 하위가 부모의 경계를 준수하지 않습니다.

응답 성있는 레이아웃을 만들기 위해 flexbox를 사용하려고합니다. 간단히 말해서, 나는 브라우저 윈도우의 높이와 너비가 조작 될 때의 이미지를 this example처럼 수행하려고합니다.Flexbox 하위가 부모의 경계를 준수하지 않습니다.

두 예제는 첫 번째 배너에서 높이가 설정된 파란색 배너가 추가 된 것을 제외하고는 거의 동일합니다. 녹색 배너는 나머지 수직 공간을 차지해야하며 이미지는 녹색 배너의 높이를 준수해야합니다.

* 참고 : 페이지가 렌더링 될 때까지 높이가 무엇인지 알 수없는 파란색 배너 높이가 동적입니다. 이 예제는 200px로 하드 코딩되어 있으므로 예제가 작동합니다.

도움을 주시면 감사하겠습니다.

코드 예제 :

<html> 
    <body> 
    <div class="wrapper"> 
     <div class="imageWrapper"> 
     <img src="http://fpoimg.com/1000x800"> 
     </div> 
    </div> 
    <div class="stacksWrapper"></div> 
    </body> 
</html> 

    * { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } 
html { 
    margin:0; 
    padding:0; 
    height:100%; 
    width: 100%; 
} 
body { 
    margin:0; 
    padding:0; 
    background:red; 
    height: 100%; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.wrapper { 
width: 100%; 
    text-align: center; 
    background: green; 
    flex: 1; 
    flex-basis: 0; 
    min-height: 0; 
    position: relative; 
} 

.imageWrapper { 
    height:100%; 
    width: 100%; 

    img { 
     max-height:100%; 
     max-width:100%; 
     width: auto; 
    } 
} 

.stacksWrapper { 
    height: 200px; 
    width: 100%; 
    background-color: blue; 
}

출처

2016-06-06 Cody M.

당신은 또한 이미지 래퍼 플렉스 사용할 수 있으며 피하기 위해 절대 위치에 이미지를 설정할 수 있습니다 그것을 참조하십시오 축소 :

.imageWrapper { 
    height: 100%; 
    width: 100%; 
    display:flex; 

    img { 
     max-height:100%; 
     max-width:100%; 
    /* cure shrinking effect */ 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    /* end cure shrinking effect */ 
     margin:auto; 
    } 
}

http://codepen.io/gc-nomade/pen/wWKGOK

출처

2016-06-06 20:13:24

당신은 당신의 .wrapper 요소에 세 flexbox 속성을 추가 할 수 있습니다

.wrapper { 
    width: 100%; 
    text-align: center; 
    background: green; 
    flex: 1; 
    flex-basis: 0; 
    min-height: 0; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

출처

2016-06-06 19:59:16 makshh

이것은 현재 유효한 해결책 인 것처럼 보입니다. –

Flexbox 하위가 부모의 경계를 준수하지 않습니다.

답변

관련 문제