flexbox 열 자식의 높이 100 %

flexbox 열 자식의 높이 100 %

---

이 질문에 이미 답변이 있습니다.

• 중첩 된 flexbox를 작동시키는 방법 3 답변

flex'd 요소의 자식이 height백분율로 응답하지 않는다는 flexbox 열에 문제가 있습니다. 나는 이것을 Chrome에서만 확인했으며 Chrome에서만 문제가 있음을 이해합니다. 내 예는 다음과 같습니다.

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

여기 CodePen이 있습니다.

빨간색 .flex-child이 파란색을 채우 도록 원합니다 .flex. 왜 작동하지 height:100%않습니까?

---

TL; DR : 설정 .flex을 display:flex하고는 제거 height:100%에 .flex-child. 여기에서 수정 된 CodePen을 볼 수 있습니다.

작동하는 이유 :

이 유사한 질문 에서 flexbox 사양에 따라 align-self:stretch값 (플렉스 요소의 기본값) 이 요소의 교차 크기 속성 (이 경우 ) 의 사용 된 값만 변경 한다는 것을 배웠습니다 height. 그러나 백분율은 사용 된 값 이 아니라 부모의 교차 크기 속성의 지정된 값 에서 계산됩니다 . Inspector를 열고 height:100%'Styles' height:1200px아래에 있지만 'Computed'아래를 보면 각각 지정된 값 과 사용 된 값이 표시됩니다.

이 점에서 Chrome은 사양을 따르는 것 같습니다. 즉, 설정 은 지정된 의 100 % height:100%를 .flex-child의미합니다 . on을 지정하지 않았기 때문에 기본값 인 . 레이아웃 엔진이 왜 혼란 스럽습니까?height.flexheight.flexheightauto

설정 .flex으로 display:flex하고 제거 height:100%에서 .flex-child(그것의 100 %를 설정하려고 유지하지 않습니다 그래서 auto할 것입니다 것은) .flex-child모두 채우기.flex

이것이 작동하지 않을 때 :

일부만 채우려는 경우에는 작동하지 않습니다 .flex. 설정하려고 .flex-child로 height:90%는 사용 가능한 모든 공간을 채우기거야 아이 수단을 휘어 있기 때문에. 절대 포지셔닝으로 해킹 할 수있을 거라고 생각했지만 그 역시 작동하지 않는 것 같습니다. 당신은에 두 번째 아이 추가하여 해킹 수 있습니다 .flex우리가 전화 할게 있음을 .spacer, 그리고 설정 .spacer에 flex:1와 .flex-child에 flex:9(설정하십시오 flex-direction:column에 .flex너무). 해킹이지만 내가 고칠 수있는 유일한 방법입니다. 여기 CodePen이 있습니다.

바라건대 우리는 이것에 계속 의존 할 필요가 없으며 예상대로 작동하도록 사양을 변경할 것입니다.

참고 URL : https://stackoverflow.com/questions/20959600/height-100-on-flexbox-column-child