Perché gli oggetti flessibili non si riducono oltre le dimensioni del contenuto?

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

Ho provato a usare word-break: break-worde mi ha aiutato, ma ancora quando ridimensiono la colonna a una larghezza molto piccola, le lettere nel testo sono suddivise in più righe (una lettera per riga), eppure la colonna non ha una larghezza inferiore a una dimensione di 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 della flessibilità 1: 3: 4: 4)

Lo so, impostare una dimensione del carattere e un'imbottitura di colonna su più piccoli 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>

La dimensione minima automatica degli articoli Flex

Stai riscontrando un'impostazione predefinita di flexbox.

Un oggetto flessibile non può essere più piccolo della dimensione del suo contenuto lungo l'asse principale.

I valori predefiniti sono ...

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

... per articoli flessibili rispettivamente in direzione di riga e di colonna.

È possibile ignorare queste impostazioni predefinite impostando gli elementi flessibili su:

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

Specifiche Flexbox

4.5. Dimensione minima automatica degli articoli Flex

Per fornire una dimensione minima predefinita più ragionevole per gli articoli 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 articolo flessibile che si overflowtrova visiblenell'asse principale, quando specificato sulla proprietà di dimensione minima dell'asse principale dell'elemento flessibile, specifica una dimensione minima automatica . Altrimenti si calcola 0.

In altre parole:

• I valori predefiniti min-width: autoe si min-height: autoapplicano solo quando lo overflowè visible.
• In caso overflowcontrario visible, il valore della proprietà di dimensione minima è 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 con orientamento riga non viene visualizzato min-height: autoper impostazione predefinita.
• Per una spiegazione più dettagliata vedi questo post:
  • rendering della larghezza minima diversamente in direzione flessibile: riga e direzione flessibile: colonna

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

Contenitori Flex nidificati

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

Fondamentalmente, un oggetto flessibile di livello superiore con min-width: autopuò impedire il restringimento degli oggetti nidificati di seguito con min-width: 0.

Esempi:

• L'articolo flessibile non si riduce di dimensioni inferiori al suo contenuto
• Adattare il bambino al genitore
• la proprietà css white-space sta creando problemi con flex

Note sul rendering del browser

• Chrome vs. Firefox / Edge

  Almeno dal 2017, sembra che Chrome stia ripristinando (1) i valori di default min-width: 0/ min-height: 0o (2) applicando automaticamente i 0valori predefiniti 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 di ridimensionamento flessibile tra Firefox e Chrome

• IE11

  Come indicato nelle specifiche, il autovalore per le proprietà min-widthe min-heightè "nuovo". Ciò significa che alcuni browser potrebbero comunque visualizzare un 0valore per impostazione predefinita, poiché hanno implementato il layout flessibile prima dell'aggiornamento del valore e perché 0è il valore iniziale per min-widthe min-heightin CSS 2.1 . Uno di questi browser è IE11. Altri browser hanno aggiornato al autovalore più recente come definito nelle specifiche del 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