Dlaczego elementy flex nie zmniejszają poprzedniego rozmiaru zawartości?

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

Próbowałem użyć word-break: break-word i to pomogło, ale mimo to, gdy zmieniam rozmiar kolumny na bardzo małą szerokość, litery w tekście są podzielone na wiele linii (jedna litera na linię), a jednak kolumna nie ma mniejszej szerokości niż jeden rozmiar litery.

Zobacz to video (na początku Pierwsza kolumna jest najmniejsza, ale kiedy zmieniłem rozmiar okna, jest to najszersza kolumna. Po prostu chcę zawsze szanować ustawienia flex; rozmiary flex 1 : 3 : 4 : 4)

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

Nie mogę używać 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>
Author: MrMaavin, 2016-03-27
Source

2 answers

Automatyczny minimalny rozmiar elementów Flex

Napotkasz domyślne ustawienie flexbox.

element flex 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 flex odpowiednio w kierunku wiersza i kierunku kolumny.

Możesz zastąpić te wartości domyślne, ustawiając elementy flex do:

  • min-width: 0
  • min-height: 0
  • overflow: hidden (lub jakąkolwiek inną wartość, z wyjątkiem visible)

Specyfikacja Flexbox

4.5. Automatyczny minimalny rozmiar Flex Pozycje

Aby zapewnić bardziej rozsądny domyślny minimalny rozmiar elementów flex, to Specyfikacja wprowadza nową wartość auto jako wartość początkową właściwości min-width i min-height zdefiniowane w CSS 2.1.

W odniesieniu do auto wartość...

Na elemencie flex, którego overflow znajduje się visible w osi głównej, gdy jest określony we właściwości min-size głównej osi flex, określa automatyczny minimalny rozmiar . W przeciwnym razie oblicza się 0.

Innymi słowy:

  • wartości domyślne min-width: auto i min-height: auto mają zastosowanie tylko wtedy, gdy overflow wynosi visible.
  • jeśli wartość overflow nie jest visible, wartość właściwości min-size wynosi 0.
  • stąd overflow: hidden może być substytutem dla min-width: 0 i min-height: 0.

I...

Zastosowałeś min-width: 0, a element nadal nie psychiatra?

Zagnieżdżone Kontenery Flex

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

Zasadniczo, element flex wyższego poziomu z {[2] } może zapobiec kurczeniu się na elementach zagnieżdżonych poniżej z min-width: 0.

Przykłady:

Notatki Renderowania Przeglądarki

  • Chrome vs. Firefox / Edge

    Od co najmniej 2017 roku wydaje się, że Chrome albo (1) wraca do min-width: 0 / min-height: 0 domyślne, lub (2) automatyczne stosowanie domyślnych 0 w pewnych sytuacjach opartych na algorytmie tajemnicy. (To może być to, co nazywają 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. Ten problem jest omówiony bardziej szczegółowo tutaj: flex-shrink rozbieżność między Firefox i Chrome

  • IE11

    Jak wspomniano w specyfikacji, auto wartość dla właściwości min-width i min-height jest "nowa". Oznacza to, że niektóre przeglądarki nadal mogą renderować wartość 0 domyślnie, ponieważ zaimplementowały układ flex zanim wartość została zaktualizowana, a ponieważ 0 jest wartością początkową dla min-width i min-height WCSS 2.1 . Jedną z takich przeglądarek jest IE11. inne przeglądarki zaktualizowały do nowszej wartości autozdefiniowanej w specyfikacji flexbox.

Revised 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

 645
Author: Michael Benjamin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 14:57:28

Okazało się, że to ugryzło mnie wielokrotnie przez lata zarówno dla flex i grid, więc zamierzam zaproponować następujące: 

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

A następnie po prostu użyj min-width: auto lub min-height: auto, jeśli potrzebujesz takiego zachowania.

W zasadzie, dorzuć również rozmiar pudełka, aby wszystkie układy były bardziej rozsądne: 

* { 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 z wykorzystaniem mieszanki powyższych. W rzeczywistości nie mogę wymyślić żadnych przypadków, w których chciałbym układać z treści Na zewnątrz do flex / grid, a nie flex / grid do wewnątrz do treści - - - i na pewno, jeśli istnieją, są rzadkie. Więc to jest złe domyślne. Ale może coś przeoczyłem?
 6
Author: voracity,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-24 10:36:44