플렉스 박스 부모가 자식보다 축소

어떻게이 플렉스 부모가 자식의 높이보다 작게 축소되지 않도록 할 수 있습니까? 회색 컨테이너는 flex 부모이고 흰색 상자는 자식입니다.플렉스 박스 부모가 자식보다 축소

Flex children extend outside parent

grey box 
    display flex 

white boxes 
    display block 
    height 200px

출처

2014-11-25 mz3

문제점을 발견했습니다. 그것은 규칙과 CSS 리셋에 의해 발생했다 : 나는 진짜 해답이 될 수 있습니다 것을 발견

body { height:auto; min-height:100%; } 
html { height: 100%; }

출처

2014-11-25 20:16:17 mz3

그래도 문제가 해결되지 않으면'flex-shrink : 0;'을 확인하십시오. 그게 내 문제를 해결 –

이것은 이상한, 그것이 의미가 없습니다. 몸 높이는 flexbox에 영향을 미치고 있습니다. –

내 사이트는 전체 화면/스크롤 레이아웃이 아니므로 이것이 나에게 맞는 부분이었습니다. 뒤늦은 관찰에서 ... 이것은 아마도 다른 누구에게도 적용되지 않으며 매우 유용한 대답은 아닙니다. 문제가 계속 발생하면 나에게 직접 질문하는 것이 좋습니다. – mz3

사소한 답 : 회색 상자 (컨테이너)에 min-height: 200px를 추가합니다.

회색 상자 (플렉스 컨테이너)의 높이를 지정하지 않은 경우 이미 어린이 크기에 맞게 자동 크기 여야합니다. 문맥에 따라 다르지만, 예를 들어 플렉스 컨테이너의 부모는 또 다른 플렉스 컨테이너입니다. 어쨌든 더 적절한 대답을 원한다면 & 자세한 테스트 케이스를 제공해야 할 것입니다 :))

출처

2014-11-25 18:03:54 dholbert

: 문제는 한 번 사라

body, html { height: 100%; }

나는이 변경되었습니다. 이것은 나를 위해 해결했습니다 :

"display : flex"부모 중 적어도 하나는 "flex : [some number]"속성을 가져야합니다. 내 시나리오에서, 일단 아이에게 1로 굴곡을 설정하면 갑자기 다른 아이가 이상한 수축을 멈 춥니 다.

출처

2015-04-23 01:00:37

플렉스 박스 부모가 자식보다 축소

답변

관련 문제