Flexbox 어린이를 부모의 100 % 키로 만들려면 어떻게해야합니까?

Flexbox 내부의 Flex 항목의 수직 공간을 채우려 고합니다.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

그리고 여기 JSFiddle이 있습니다

flex-2-child 다음 두 경우를 제외하고 필요한 높이를 채우지 않습니다.

1. flex-2 높이가 100 %입니다 (플렉스 항목에 기본적으로 100 %가 + Chrome에서 버그가 있기 때문에 이상합니다)
2. flex-2-child 불편한 위치 절대 값을 가짐

현재 Chrome 또는 Firefox에서는 작동하지 않습니다.

사용하다 align-items: stretch

David Storey의 답변과 유사하게 내 해결 방법은 다음과 같습니다.

.flex-2 {
    display: flex;
    align-items: stretch;
}

또는 원하는 항목 에만 align-items사용할 수 있습니다 .align-self.flex-2-child

나는 여기 비슷한 질문에 대답 했다 .

나는 당신이 이미 position: absolute;불편 하다고 말 했지만 작동합니다. 크기 조정 문제 해결에 대한 자세한 내용은 아래를 참조하십시오.

Chrome에서 열린 웹킷 접두사 만 추가했지만 데모는 이 jsFiddle 을 참조하십시오 .

기본적으로 두 가지 문제가 있으며 별도로 처리해야합니다.

1. flex-item의 자식이 높이 100 %를 채우도록하기
   • position: relative;자녀의 부모에 설정하십시오 .
   • position: absolute;아이에게 설정하십시오 .
   • 그런 다음 필요에 따라 너비 / 높이를 설정할 수 있습니다 (샘플에서 100 %).
2. Chrome에서 크기 조정 스크롤 "쿼크"수정
   • 넣어 overflow-y: auto;스크롤 DIV에.
   • 스크롤 가능한 div에는 명시적인 높이가 지정되어 있어야합니다. 내 샘플의 높이는 이미 100 %이지만 아직 적용되지 않은 경우 지정할 수 있습니다height: 0;

스크롤 문제에 대한 자세한 내용 은이 답변 을 참조하십시오 .

올바르게 이해하면 빨간색 영역이 녹색으로 완전히 덮 이도록 flex-2-child가 부모의 높이와 너비를 채우도록 하시겠습니까?

그렇다면 flexbox를 사용하도록 flex-2를 설정하면됩니다.

.flex-2 {
    display: flex;  
}

그런 다음 flex-2-child에게 유연성을 갖도록 지시하십시오.

.flex-2-child {    
    flex: 1;
}

http://jsfiddle.net/2ZDuE/10/ 참조

그 이유는 flex-2-child는 flexbox 항목이 아니지만 그 상위 항목이기 때문입니다.

Chrome의 동작이 CSS 사양과보다 일관성이 있다고 가정합니다 (직관적이지는 않지만). 인 flexbox 사양에 따르면, 기본 stretch값 align-self속성 변경 사항 만 사용되는 값 (요소의 "크로스 크기 속성"의를 height이 경우). 그리고 CSS2.1 spec을 이해함 에 따라 백분율 높이는 사용 된 값이 아닌 부모의 지정된 값 에서 계산됩니다 height. 부모의 지정된 값은 height플렉스 속성의 영향을받지 않으며 여전히 auto.

명시 적으로 설정을 height: 100%만드는 것은 그것을 공식적으로 가능한 단지 설정처럼, 아이의 비율 높이를 계산하기 height: 100%에 html가능의 비율을 높이 계산 할 수 bodyCSS2.1에 있습니다.

나는 스스로 해결책을 찾았다. 아래 CSS가 있다고 가정 해보십시오.

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

이 경우 높이를 100 %로 설정하면 작동하지 않으므로 다음과 같이 margin-bottom규칙을 설정하십시오 auto.

.child {
  margin-bottom: auto;
}

자녀가 부모의 가장 위에 정렬되며 align-self원하는 경우 규칙 을 사용할 수도 있습니다 .

.child {
  align-self: flex-start;
}

아이디어는 것 display:flex;과는 flex-direction: row;충전되어 container함께 DIV를 .flex-1하고 .flex-2있지만, 그 의미하지 않는 .flex-2기본을 가지고 height:100%;그것이 전체 높이로 확장되고 하위 요소 (가지고 있더라도 .flex-2-child으로) height:100%;당신이 부모를 설정해야합니다 height:100%;또는 사용 display:flex;와 flex-direction: row;상의 .flex-2DIV 너무.

내가 아는 display:flex것으로 모든 하위 요소 높이를 100 %로 확장하지는 않습니다.

작은 데모로 높이가 제거되어 http://jsfiddle.net/2ZDuE/3/ 에서 .flex-2-child사용 display:flex;되었습니다 .flex-2.

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

이것은 align-self: stretch;우리가 스트레칭하고자하는 요소 로 해결할 수도 있습니다 .

때로는 flexbox 설정에서 하나의 항목 만 늘리는 것이 좋습니다.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

.container {. . . . 아이템 정렬 : 스트레치; . . . . }

이것은 CSS를 사용하는 솔루션입니다.

우선 첫 번째 자식 (flex-1)이 100px 여야하면 flex가되어서는 안됩니다. 실제로 CSS + 에서는 유연하고 정적 인 요소 (열 또는 행)를 설정할 수 있으며 예제는 다음과 같이 쉽습니다.

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

컨테이너 CSS :

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

그리고 분명히 포함 CSS + 0.2 코어를 포함

바이올린 소리