Dlaczego elementy flex nie zmniejszają się ponad rozmiar zawartości?

Mar 27 2016

Mam 4 kolumny flexbox i wszystko działa dobrze, ale kiedy dodam tekst do kolumny i ustawię go na duży rozmiar czcionki, powoduje to, że kolumna jest szersza niż powinna ze względu na właściwość flex.

Próbowałem użyć word-break: break-wordi pomogło, ale mimo to, gdy zmieniam rozmiar kolumny do bardzo małej szerokości, litery w tekście są podzielone na wiele linii (jedna litera w linii), a mimo to kolumna nie jest mniejsza niż rozmiar jednej litery .

Obejrzyj to wideo (na początku pierwsza kolumna jest najmniejsza, ale kiedy zmieniam rozmiar okna, jest to najszersza kolumna. Chcę tylko zawsze przestrzegać ustawień flex; rozmiary flex 1: 3: 4: 4)

Wiem, że ustawienie mniejszego rozmiaru czcionki i wypełnienia kolumn pomoże ... ale czy jest jakieś inne rozwiązanie?

Nie mogę użyć overflow-x: hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Odpowiedzi

619 MichaelBenjamin Mar 27 2016 at 19:41

Automatyczny minimalny rozmiar elementów Flex

Napotykasz domyślne ustawienie flexbox.

Element elastyczny nie może być mniejszy niż rozmiar jego zawartości wzdłuż głównej osi.

Wartości domyślne to ...

min-width: auto
min-height: auto

... dla elementów elastycznych odpowiednio w kierunku wierszy i kolumn.

Możesz zastąpić te ustawienia domyślne, ustawiając elementy flex na:

min-width: 0
min-height: 0
overflow: hidden(lub dowolna inna wartość, z wyjątkiem visible)

Specyfikacja Flexbox

4.5. Automatyczny minimalny rozmiar elementów Flex

Aby zapewnić bardziej rozsądny domyślny rozmiar minimalny dla elementów elastycznych, niniejsza specyfikacja wprowadza nową autowartość jako wartość początkową właściwości min-widthi min-heightzdefiniowanych w CSS 2.1.

Jeśli chodzi o autowartość ...

W elemencie flex, który overflowznajduje się visiblena osi głównej, gdy jest określony we właściwości min-size na osi głównej elementu flex, określa automatyczny rozmiar minimalny . W przeciwnym razie oblicza się 0.

Innymi słowy:

Wartości min-width: autoi są min-height: autostosowane tylko wtedy, gdy overflowjest visible.
Jeśli overflowwartość nie jest równa visible, wartość właściwości min-size to 0.
W związku z tym overflow: hiddenmoże zastępować min-width: 0i min-height: 0.

i...

Algorytm minimalnego wymiarowania dotyczy tylko głównej osi.
Na przykład element flex w kontenerze w kierunku wierszy nie min-height: autojest domyślnie pobierany .
Bardziej szczegółowe wyjaśnienie znajduje się w tym poście:
- renderowanie min-width inaczej w flex-direction: row i flex-direction: column

Zastosowałeś min-width: 0, a element nadal się nie kurczy?

Zagnieżdżone kontenery Flex

Jeśli masz do czynienia z elastycznymi elementami na wielu poziomach struktury HTML, może być konieczne, aby zastąpić domyślne min-width: auto/ min-height: autona przedmioty na wyższych poziomach.

Zasadniczo element elastyczny wyższego poziomu z min-width: automoże zapobiegać kurczeniu się elementów zagnieżdżonych poniżej za pomocą min-width: 0.

Przykłady:

Uwagi dotyczące renderowania przeglądarki

Chrome kontra Firefox / Edge

Co najmniej od 2017 roku wydaje się, że Chrome (1) powraca do min-width: 0/ min-height: 0defaults lub (2) automatycznie stosuje 0ustawienia domyślne w określonych sytuacjach w oparciu o tajemniczy algorytm. (To może być coś, co nazywają interwencją ). W rezultacie wiele osób widzi, że ich układ (szczególnie pożądane paski przewijania) działa zgodnie z oczekiwaniami w przeglądarce Chrome, ale nie w przeglądarce Firefox / Edge. Ten problem jest omówiony bardziej szczegółowo tutaj: rozbieżność flex-shrink między przeglądarkami Firefox i Chrome
IE11

Jak wspomniano w specyfikacji, autowartość właściwości min-widthi min-heightto „nowy”. Oznacza to, że niektóre przeglądarki mogą nadal 0domyślnie renderować wartość, ponieważ zaimplementowały układ flex przed aktualizacją wartości i ponieważ 0jest to wartość początkowa dla min-widthi min-heightw CSS 2.1 . Jedną z takich przeglądarek jest IE11. Inne przeglądarki zaktualizowały się do nowszej autowartości zdefiniowanej w specyfikacji flexbox .

Zmienione demo

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

2 voracity Aug 24 2020 at 15:40

Odkryłem, że przez lata wielokrotnie mnie to ugryzło, zarówno w przypadku flex, jak i grid, więc zasugeruję, co następuje:

* { min-width: 0; min-height: 0; }

a następnie po prostu użyj min-width: autolub min-height: autojeśli potrzebujesz tego zachowania.

W rzeczywistości, dorzuć również rozmiar pudełka, aby cały układ był bardziej rozsądny:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Czy ktoś wie, czy są jakieś dziwne konsekwencje? Nie spotkałem się z niczym od kilku lat, używając mieszanki powyższych. W rzeczywistości nie przychodzą mi do głowy żadne przypadki, w których chciałbym układać od treści na zewnątrz do flex / grid, zamiast flex / grid do wewnątrz do treści - i na pewno, jeśli istnieją, są rzadkie. Więc to wygląda na złe ustawienie domyślne. Ale może czegoś mi brakuje?