플렉스 아이템 높이가 다른 플렉스 아이템과 일치하도록 확장되는 것을 방지

Question 1

컨테이너 내부에는 플렉스 박스를 사용하여 나란히있는 두 개의 요소가 있습니다. 두 번째 요소 ( .flexbox-2)에서는 CSS에서 높이를 설정합니다. 그러나 첫 번째 요소 ( .flexbox-1)는의 높이와 일치합니다 .flexbox-2. .flexbox-1의 높이 일치를 중지 .flexbox-2하고 대신 원래 높이를 유지하려면 어떻게해야합니까?

지금까지 내가 가진 것입니다 ( jsFiddle으로 도 사용 가능 )

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

스 니펫 확장

Question 2

이것은 오래된 해결책입니다. 내 대답은 Aaron이 사용align-self 하는이 새로운 대답으로 대체됩니다 . 그것은 CSS 특질에 의존하지 않는 더 나은 솔루션입니다.

플렉스 컨테이너 자체 에 높이가없는height: 0% 한 첫 번째 플렉스 항목에 설정할 수 있습니다 . 부모로부터 상속 할 높이가 없기 때문에 백분율 높이로 인해 축소됩니다. 그런 다음 내용과 함께 성장합니다.

예

이 예에서는 -webkit접두사를 제거했습니다 . 실제로 Safari에만 필요 하며 접두사가 없는 버전 위에 접두사를 추가 할 수 있습니다 . flex-direction: row기본값이므로 제거 했습니다.

코드 스 니펫 표시

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

스 니펫 확장

Question 3

나는 이것이 오래된 질문이라는 것을 알고 있지만 더 나은 해결책은를 사용하여 플렉스 항목을 상단에 정렬하도록 설정하는 것 flex-start입니다.

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}

<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

스 니펫 확장

Question 4

상위 align-items 에 추가하여 쉽게 수정할 수 있습니다 . flex-start;

그게 다야

Question 5

height아이들의를로 설정하면 아이들 max-content이 줄어들지 않습니다.

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

스 니펫 확장