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


312

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>

Odpowiedzi:


540

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


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:


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

jsFiddle


2
Miałem znacznik nadrzędny <fieldset> znacznie wyżej w domenie, co spowodowało ten sam problem. Ustawienie jego minimalnej szerokości na 0 naprawiło to.
Jan Swart,

1
Wszelkie przemyślenia na ten temat: stackoverflow.com/a/36247448/8620333 .. Znalazłem, że ma to związek z, min-widthale nie jestem pewien wszystkich szczegółów.
Temani Afif

3
Wygląda na to, że Chrome zmienił zachowanie w wersji 73, aby nie zmniejszać się mniej niż zawartość.
maccam94

2
Ta sama poprawka działała z min-height: 0;. Musiałem spróbować ustawić to dla kilku wyższych elementów w drzewie.
Ben Wheeler,

Musiałem ustawić min-height: 0;w IKE 10 miejscach, żeby to zadziałało. Dziękuję, dziękuję, dziękuję za świetną wskazówkę!
dave0688
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.