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

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

플렉스 박스 안에 있는 플렉스 아이템의 수직 공간을 채우려고 합니다.

.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>

그리고 여기 JS Fidle이 있습니다.

flex-2-child다음과 같은 두 가지 경우를 제외하고는 필요한 높이를 채우지 못합니다.

1. flex-2높이가 100%입니다(플렉스 항목의 기본값이 100%이기 때문에 이상함 + 크롬에서는 버그가 있음).
2. flex-2-child인 위치를 .

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

사용하다align-items: stretch

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

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

:height: 100%하위 구성 요소에서 제거해야 합니다(주석 참조).

신대의 align-items사용할 수 있습니다.align-self 침마에서..flex-2-child확장을 원하는 항목입니다.

저는 여기서 비슷한 질문에 답했습니다.

나는 당신이 이미 말한 것을 알고 있습니다.position: absolute;불편하지만 효과가 있습니다.크기 조정 문제 해결에 대한 자세한 내용은 아래를 참조하십시오.

크롬에서 열려 있는 웹킷 접두사만 추가했지만 데모를 보려면 이 jsFiddle을 참조하십시오.

당신은 기본적으로 제가 따로 다룰 두 가지 문제가 있습니다.

1. 유연 항목의 하위 항목이 높이를 100% 채우도록 하기

• 트position: relative;아이의 부모에게
• 트position: absolute;아이에게
• 그런 다음 필요에 따라 너비/높이를 설정할 수 있습니다(내 샘플에서는 100%).

2. Chrome에서 스크롤 "quirk" 크기 조정 수정

• 다놓을 .overflow-y: auto;스크롤 가능한 디브에.
• 스크롤 가능한 div에는 명시적인 높이가 지정되어 있어야 합니다.이지만, 된 것이 " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " 을 할 수 .height: 0;

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

제가 정확히 이해했다면, 당신은 flex-2-child가 부모의 높이와 너비를 채우고 빨간색 부분이 녹색으로 완전히 덮이기를 원하시나요?

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

.flex-2 {
    display: flex;
}

그런 다음 flex-2-child에게 유연해지라고 말합니다.

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

http://jsfiddle.net/2ZDuE/10/ 을 참조하십시오.

그 이유는 flex-2-child가 Flexbox 항목이 아니라 상위 항목이기 때문입니다.

저는 혼자서 해결책을 찾았습니다.아래에 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;
}

크롬의 행동이 CSS 사양과 더 일치한다고 생각합니다(직관적이지는 않지만).사양에 Flexbox는 과 같습니다.stretch의 가치.align-self속성은 요소의 "교차 크기 속성"의 사용된 값만 변경합니다.height이 경우).그리고, CSS 2.1 규격을 이해한 바와 같이, 백분율 높이는 부모의 지정된 값으로부터 계산됩니다.height사용된 값이 아닙니다.상위 항목의 지정된 값height플렉스 속성의 영향을 받지 않으며 여전히auto.

명시적 설정height: 100%설정과 마찬가지로 공식적으로 어린이의 백분율 키를 계산할 수 있습니다.height: 100%로.html의 백분율 높이를 계산할 수 있습니다.bodyCSS 2.1에서.

이 문제는 또한 다음을 통해 해결할 수 있습니다.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>

.parent {
    display: flex;
}

.child {
    min-height: 100%;
}

다른 접근 방식(다른 옵션은 더 일반적인 솔루션이 필요했기 때문에 제 경우에 맞지 않을 것입니다. 사용을 피하고 싶습니다.position: absolute가능하면, 그리고 정당하게display: flex와 함께align-items: stretch다른 사일링 때문에 내 경우에는 작동하지 않을 것입니다)

1. 의 부모가 있음display: flex
2. 요소 디스플레이도 유연하게 사용할 수 있습니다.align-self: stretch그리고.margin-top: 0+margin-bottom: 0

최소 재현 가능한 예제:

.parrent {
  display: flex;
}
.full-height-just-with-bg-collor {
  width: 100%;
  display: flex;
  align-self: stretch;
  // this can be just 0 or you can set just the top and bottom values
  margin: 0 2px;
  background-color: green;
}

<div>
  <div class="parrent">
    <div class="full-height-just-with-bg-collor"></div> 
    textForHeight
  </div>
</div>

라고 생각할 수 있습니다.display:flex;와 함께flex-direction: row;다음을 채우고 있습니다.container와의 디브..flex-1그리고..flex-2하지만 그렇다고 해서.flex-2기본값이 있습니다.height:100%;최대 높이까지 확장되더라도.

아이요소를 것 (그리고자것갖는를소요식▁(것▁and▁(▁a▁have그▁to갖).flex-2-child)와 함께height:100%;모를다로설야합해니다정으음부▁해야 합니다.height:100%;또는 사용display:flex;와 함께flex-direction: row;에서..flex-2div 도.

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

작은데에서 한 작은 .flex-2-child 및사된을 했습니다.display:flex;.flex-2: http://jsfiddle.net/2ZDuE/3/

.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;
}

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

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

재미있는 사실: 높이-100%는 최신 크롬에서 작동하지만 사파리에서는 작동하지 않습니다.

---

그래서 순풍에 대한 해결책은.

"가변 항목-매개"

https://tailwindcss.com/docs/align-items

그리고 아이의 아이에게 재귀적으로 적용됩니다...

.vmx { . . align-filename: 스트레치; . . }

이것은 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 코어를 포함합니다.

여기 바이올린이 있습니다.

언급URL : https://stackoverflow.com/questions/15381172/how-can-i-make-flexbox-children-100-height-of-their-parent