Dlaczego elementy elastyczne nie kurczą się w stosunku do rozmiaru zawartości?

Mam 4 kolumny Flexbox i wszystko działa dobrze, ale kiedy dodam trochę tekstu do kolumny i ustawię 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 to pomogło, ale mimo to, gdy zmieniam rozmiar kolumny do bardzo małej szerokości, litery w tekście są dzielone na wiele linii (jedna litera na linię), a jednak kolumna nie ma mniejszej szerokości niż jeden rozmiar litery .

Obejrzyj ten film (na początku pierwsza kolumna jest najmniejsza, ale kiedy zmieniłem rozmiar okna, jest to najszersza kolumna. Chcę tylko zawsze przestrzegać ustawień elastycznych; rozmiary elastycznych 1: 3: 4: 4)

Wiem, ustawienie rozmiaru czcionki i wypełnienia kolumny na mniejsze 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>

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.

Domyślne są ...

• min-width: auto
• min-height: auto

... dla elementów elastycznych odpowiednio w kierunku wiersza i kolumny.

Możesz zastąpić te wartości 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 minimalny rozmiar elementów elastycznych, niniejsza specyfikacja wprowadza nową autowartość jako wartość początkową właściwości min-widthi min-heightzdefiniowanych w CSS 2.1.

W odniesieniu do autowartości ...

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

Innymi słowy:

• min-width: autoI min-height: autodomyślnie stosuje się tylko wtedy, gdy overflowjest visible.
• Jeśli overflowwartość nie jest visible, wartością właściwości min-size jest 0.
• Dlatego overflow: hiddenmoże być substytutem dla min-width: 0i min-height: 0.

i...

• Algorytm minimalnego rozmiaru ma zastosowanie tylko na głównej osi.
• Na przykład element elastyczny w kontenerze z rzędami nie min-height: autojest domyślnie wyświetlany.
• Aby uzyskać bardziej szczegółowe wyjaśnienie, zobacz ten post:
  • minimalna szerokość renderowania różnie dla kierunku wygięcia: rząd i kierunek wygięcia: kolumna

Zastosowałeś minimalną szerokość: 0, a przedmiot nadal się nie kurczy?

Zagnieżdżone kontenery Flex

Jeśli masz do czynienia z elementami elastycznymi na wielu poziomach struktury HTML, może być konieczne zastąpienie elementów domyślnych min-width: auto/ min-height: autona wyższych poziomach.

Zasadniczo, przedmiot elastyczny o wyższym poziomie min-width: automoże zapobiec kurczeniu się przedmiotów zagnieżdżonych poniżej min-width: 0.

Przykłady:

• Przedmiot elastyczny nie kurczy się mniej niż jego zawartość
• Dopasowanie dziecka do rodzica
• Biała właściwość css powoduje problemy z Flex

Uwagi dotyczące renderowania w przeglądarce

• Chrome vs. Firefox / Edge

  Od co najmniej 2017 r. Wydaje się, że Chrome albo (1) wraca do min-width: 0/ min-height: 0defaults, albo (2) automatycznie stosuje 0wartości domyślne w pewnych sytuacjach w oparciu o tajemniczy algorytm. (To może być tak zwana interwencja .) W rezultacie wiele osób widzi, że ich układ (szczególnie pożądane paski przewijania) działa zgodnie z oczekiwaniami w Chrome, ale nie w Firefox / Edge. Zagadnienie to omówione jest bardziej szczegółowo tutaj: rozbieżność elastyczności między Firefoksem a Chrome

• IE11

  Jak zauważono w specyfikacji, autowartość właściwości min-widthi min-heightjest „nowa”. Oznacza to, że niektóre przeglądarki mogą nadal renderować 0wartość domyślnie, ponieważ ich wykonanie układu elastycznego zanim wartość została zaktualizowana i dlatego 0jest wartością początkową 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 określonej 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