Perché gli elementi flessibili non si restringono oltre la dimensione del contenuto?

Mar 27 2016

Ho 4 colonne flexbox e tutto funziona bene, ma quando aggiungo del testo a una colonna e lo imposto a una dimensione del carattere grande, la colonna diventa più ampia di quanto dovrebbe essere a causa della proprietà flex.

Ho provato a usarlo word-break: break-worde mi ha aiutato, ma ancora quando ridimensiono la colonna a una larghezza molto piccola, le lettere nel testo vengono suddivise in più righe (una lettera per riga), eppure la colonna non ha una larghezza inferiore a quella di una lettera .

Guarda questo video (all'inizio, la prima colonna è la più piccola, ma quando ho ridimensionato la finestra, è la colonna più ampia. Voglio solo rispettare sempre le impostazioni di flessibilità; dimensioni di flessibilità 1: 3: 4: 4)

Lo so, impostare la dimensione del carattere e il riempimento delle colonne su un valore più piccolo aiuterà ... ma c'è qualche altra soluzione?

Non posso usare 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>

Risposte

619 MichaelBenjamin Mar 27 2016 at 19:41

La dimensione minima automatica degli articoli flessibili

Stai riscontrando un'impostazione predefinita di flexbox.

Un elemento flessibile non può essere inferiore alla dimensione del suo contenuto lungo l'asse principale.

Le impostazioni predefinite sono ...

min-width: auto
min-height: auto

... per gli elementi flessibili rispettivamente nella direzione della riga e nella direzione della colonna.

Puoi sovrascrivere queste impostazioni predefinite impostando gli elementi flessibili su:

min-width: 0
min-height: 0
overflow: hidden(o qualsiasi altro valore, eccetto visible)

Specifiche Flexbox

4.5. Dimensione minima automatica degli articoli flessibili

Per fornire una dimensione minima predefinita più ragionevole per gli elementi flessibili, questa specifica introduce un nuovo autovalore come valore iniziale delle proprietà min-widthe min-heightdefinite in CSS 2.1.

Per quanto riguarda il autovalore ...

Su un elemento flessibile il cui si overflowtrova visiblenell'asse principale, quando specificato nella proprietà min-size dell'asse principale dell'elemento flessibile, specifica una dimensione minima automatica . Altrimenti calcola a 0.

In altre parole:

Le impostazioni predefinite min-width: autoe si min-height: autoapplicano solo quando overflowè visible.
Se il overflowvalore non è visible, il valore della proprietà min-size è 0.
Quindi, overflow: hiddenpuò essere un sostituto di min-width: 0e min-height: 0.

e...

L'algoritmo di dimensionamento minimo si applica solo sull'asse principale.
Ad esempio, un elemento flessibile in un contenitore di direzione riga non viene ottenuto min-height: autoper impostazione predefinita.
Per una spiegazione più dettagliata vedere questo post:
- rendering di larghezza minima in modo diverso in flex-direction: row e flex-direction: column

Hai applicato larghezza minima: 0 e l'elemento ancora non si restringe?

Contenitori Flex annidati

Se hai a che fare con elementi flessibili su più livelli della struttura HTML, potrebbe essere necessario sovrascrivere gli elementi predefiniti min-width: auto/ min-height: autosu a livelli superiori.

Fondamentalmente, un elemento flessibile di livello superiore con min-width: autopuò impedire il restringimento sugli elementi nidificati di seguito con min-width: 0.

Esempi:

Note sul rendering del browser

Chrome contro Firefox / Edge

Almeno dal 2017, sembra che Chrome (1) stia ripristinando le impostazioni predefinite min-width: 0/ min-height: 0o (2) applicando automaticamente le 0impostazioni predefinite in determinate situazioni sulla base di un algoritmo misterioso. (Questo potrebbe essere quello che chiamano un intervento .) Di conseguenza, molte persone vedono il loro layout (specialmente le barre di scorrimento desiderate) funzionare come previsto in Chrome, ma non in Firefox / Edge. Questo problema è trattato in modo più dettagliato qui: discrepanza flex-shrink tra Firefox e Chrome
IE11

Come indicato nelle specifiche, il autovalore delle proprietà min-widthe min-heightè "nuovo". Ciò significa che alcuni browser possono ancora visualizzare un 0valore per impostazione predefinita, perché hanno implementato il layout flessibile prima che il valore fosse aggiornato e perché 0è il valore iniziale per min-widthe min-heightin CSS 2.1 . Uno di questi browser è IE11. Altri browser sono stati aggiornati al autovalore più recente come definito nelle specifiche flexbox .

Demo rivista

.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

Sto scoprendo che questo mi ha morso ripetutamente nel corso degli anni sia per il flex che per la griglia, quindi suggerirò quanto segue:

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

e poi usa min-width: autoo min-height: autose hai bisogno di quel comportamento.

In effetti, aggiungi anche il dimensionamento della scatola per rendere tutto il layout più sano:

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

Qualcuno sa se ci sono conseguenze strane? Non ho riscontrato nulla in diversi anni di utilizzo di un mix di quanto sopra. In effetti, non riesco a pensare a nessun caso in cui vorrei layout dal contenuto verso l'esterno al flex / griglia, piuttosto che flex / griglia verso l'interno del contenuto --- e sicuramente se esistono, sono rari. Quindi questo sembra un cattivo default. Ma forse mi manca qualcosa?