Zapobiegaj rozszerzaniu się wysokości elementów elastycznych w celu dopasowania do innych elementów elastycznych

Question 1

Mam dwa elementy wewnątrz kontenera, które są obok siebie za pomocą flex box. Na drugim elemencie ( .flexbox-2) ustawiam jego wysokość w CSS. Jednak wtedy pierwszy element ( .flexbox-1) będzie pasował do wysokości .flexbox-2. Jak mógłbym przestać .flexbox-1dopasowywać wysokość .flexbox-2, a zamiast tego po prostu zachować jej naturalną wysokość?

Oto, co mam do tej pory (dostępne również jako 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>

Rozwiń fragment

Question 2

To jest stare rozwiązanie. Moja odpowiedź została zastąpiona nową odpowiedzią, którą Aaron używaalign-self . To lepsze rozwiązanie, które nie polega na dziwactwie CSS.

Dopóki kontener elastyczny nie ma samej wysokości , możesz ustawić height: 0%na pierwszym elemencie elastycznym. Ponieważ nie ma wysokości do dziedziczenia po swoim rodzicu, każda wysokość procentowa spowoduje zwinięcie. Wtedy będzie rosnąć wraz z zawartością.

Przykład

W tym przykładzie usunąłem -webkitprzedrostek. Jest to naprawdę wymagane tylko w przeglądarce Safari, a prefiks można dodać nad wersją bez prefiksu. Usunąłem również, flex-direction: rowponieważ jest to wartość domyślna.

Pokaż fragment kodu

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

Expand snippet

Question 3

Wiem, że to stare pytanie, ale lepszym rozwiązaniem jest ustawienie elementu flex tak, aby był wyrównany do góry za pomocą 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>

Rozwiń fragment

Question 4

Możesz to łatwo naprawić, dodając do elementu nadrzędnego align-items: flex-start;

To wszystko

Question 5

Ustawienie heightdzieci na max-contentzapobiegnie ich kurczeniu się.

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

Rozwiń fragment

Answer 1

Mam dwa elementy wewnątrz kontenera, które są obok siebie za pomocą flex box. Na drugim elemencie ( .flexbox-2) ustawiam jego wysokość w CSS. Jednak wtedy pierwszy element ( .flexbox-1) będzie pasował do wysokości .flexbox-2. Jak mógłbym przestać .flexbox-1dopasowywać wysokość .flexbox-2, a zamiast tego po prostu zachować jej naturalną wysokość?

Oto, co mam do tej pory (dostępne również jako 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>

Rozwiń fragment

Answer 2

related: Jak wyłączyć kolumny o równej wysokości w Flexbox?

Michael Benjamin

Answer 3

To jest stare rozwiązanie. Moja odpowiedź została zastąpiona nową odpowiedzią, którą Aaron używaalign-self . To lepsze rozwiązanie, które nie polega na dziwactwie CSS.

Dopóki kontener elastyczny nie ma samej wysokości , możesz ustawić height: 0%na pierwszym elemencie elastycznym. Ponieważ nie ma wysokości do dziedziczenia po swoim rodzicu, każda wysokość procentowa spowoduje zwinięcie. Wtedy będzie rosnąć wraz z zawartością.

Przykład

W tym przykładzie usunąłem -webkitprzedrostek. Jest to naprawdę wymagane tylko w przeglądarce Safari, a prefiks można dodać nad wersją bez prefiksu. Usunąłem również, flex-direction: rowponieważ jest to wartość domyślna.

Pokaż fragment kodu

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

Expand snippet

Answer 4

148

Wiem, że to stare pytanie, ale lepszym rozwiązaniem jest ustawienie elementu flex tak, aby był wyrównany do góry za pomocą 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>

Rozwiń fragment

Aaron
źródło

1

Dzięki @MrGood Przyjęta odpowiedź ma ponad 3 lata i była wtedy dobrym sposobem na osiągnięcie pożądanego rezultatu.

Aaron,

1

Świetna odpowiedź!

Alexander Wigmore

5

Zauważ, że możesz również zrobić 'align-items: flex-start' na elemencie nadrzędnym, aby zapobiec rozwojowi wszystkich dzieci - potrzebne w moim przypadku.

Daniel Sokolowski

5

align-items: center, baseline, flex-start, flex-enddziałają również

ViES

2

Jest to konieczne, ponieważ wartość domyślna align-itemsto stretch.

DylanReile

Answer 5

1

Dzięki @MrGood Przyjęta odpowiedź ma ponad 3 lata i była wtedy dobrym sposobem na osiągnięcie pożądanego rezultatu.

Aaron,

Answer 6

1

Świetna odpowiedź!

Alexander Wigmore

Answer 7

5

Zauważ, że możesz również zrobić 'align-items: flex-start' na elemencie nadrzędnym, aby zapobiec rozwojowi wszystkich dzieci - potrzebne w moim przypadku.

Daniel Sokolowski

Answer 8

5

align-items: center, baseline, flex-start, flex-enddziałają również

ViES

Answer 9

2

Jest to konieczne, ponieważ wartość domyślna align-itemsto stretch.

DylanReile

Answer 10

2

Możesz to łatwo naprawić, dodając do elementu nadrzędnego align-items: flex-start;

To wszystko

Sergiu Cebotaru
źródło

1

Witamy w Stack Overflow. Dodając odpowiedź na pytanie sprzed pięciu lat z istniejącymi odpowiedziami, ważne jest, aby wyjaśnić, do jakiego nowego aspektu pytania się odnosisz i jak działa twoja odpowiedź i dlaczego należy jej użyć. Prawidłowe formatowanie kodu również naprawdę pomaga, ponieważ teraz w zdaniu jest po prostu pogrubiony tekst, który nie zapewnia kontekstu, do której reguły CSS należy go dodać.

Jason Aller

Answer 11

1

Witamy w Stack Overflow. Dodając odpowiedź na pytanie sprzed pięciu lat z istniejącymi odpowiedziami, ważne jest, aby wyjaśnić, do jakiego nowego aspektu pytania się odnosisz i jak działa twoja odpowiedź i dlaczego należy jej użyć. Prawidłowe formatowanie kodu również naprawdę pomaga, ponieważ teraz w zdaniu jest po prostu pogrubiony tekst, który nie zapewnia kontekstu, do której reguły CSS należy go dodać.

Jason Aller

Answer 12

Ustawienie heightdzieci na max-contentzapobiegnie ich kurczeniu się.

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

Rozwiń fragment

Zapobiegaj rozszerzaniu się wysokości elementów elastycznych w celu dopasowania do innych elementów elastycznych

Odpowiedzi:

Przykład