Por que os itens flexíveis não diminuem o tamanho do conteúdo passado?

Eu tenho 4 colunas flexbox e tudo funciona bem, mas quando adiciono algum texto a uma coluna e o configuro para um tamanho de fonte grande, ele está tornando a coluna mais larga do que deveria devido à propriedade flex.

Tentei usar word-break: break-worde ajudou, mas ainda assim, quando redimensiono a coluna para uma largura muito pequena, as letras no texto são divididas em várias linhas (uma letra por linha) e, no entanto, a coluna não possui largura menor que o tamanho de uma letra .

Assista a este vídeo (no início, a primeira coluna é a menor, mas quando redimensiono a janela, é a coluna mais larga. Só quero respeitar sempre as configurações flexíveis; tamanhos flexíveis 1: 3: 4: 4)

Eu sei, definir o tamanho da fonte e o preenchimento da coluna como menor ajudará ... mas existe alguma outra solução?

Eu não posso usar 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>

O tamanho mínimo automático de itens flexíveis

Você está encontrando uma configuração padrão do flexbox.

Um item flexível não pode ser menor que o tamanho do seu conteúdo ao longo do eixo principal.

Os padrões são ...

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

... para itens flexíveis na direção da linha e na direção da coluna, respectivamente.

Você pode substituir esses padrões configurando itens flexíveis para:

• min-width: 0
• min-height: 0
• overflow: hidden(ou qualquer outro valor, exceto visible)

Especificação Flexbox

4.5 Tamanho mínimo automático de itens flexíveis

Para fornecer um tamanho mínimo padrão mais razoável para itens flex, esta especificação introduz um novo autovalor como o valor inicial das propriedades min-widthe min-heightdefinidas no CSS 2.1.

No que diz respeito ao autovalor ...

Em um item flexível que overflowestá visibleno eixo principal, quando especificado na propriedade tamanho mínimo do eixo principal do item flexível, especifica um tamanho mínimo automático . Caso contrário, calcula para 0.

Em outras palavras:

• Os padrões min-width: autoe min-height: autoaplicam-se apenas quando overflowestiver visible.
• Se o overflowvalor não for visible, o valor da propriedade min-size é 0.
• Portanto, overflow: hiddenpode ser um substituto para min-width: 0e min-height: 0.

e...

• O algoritmo de dimensionamento mínimo se aplica apenas ao eixo principal.
• Por exemplo, um item flexível em um contêiner na direção da linha não é obtido min-height: autopor padrão.
• Para uma explicação mais detalhada, consulte este post:
  • renderização de largura mínima de maneira diferente na direção flexível: linha e direção flexível: coluna

Você aplicou largura mínima: 0 e o item ainda não diminui?

Recipientes flexíveis aninhados

Se você estiver lidando com itens flexíveis em vários níveis da estrutura HTML, pode ser necessário substituir os itens padrão min-width: auto/ min-height: autoem níveis mais altos.

Basicamente, um item flexível de nível superior com min-width: autopode evitar encolhimento nos itens aninhados abaixo com min-width: 0.

Exemplos:

• O item flexível não está encolhendo menor que seu conteúdo
• Criança apropriada no pai
• A propriedade css de espaço em branco está criando problemas com o flex

Notas de renderização do navegador

• Chrome x Firefox / Edge

  Desde pelo menos 2017, parece que o Chrome está (1) voltando aos padrões min-width: 0/ min-height: 0ou (2) aplicando os 0padrões automaticamente em determinadas situações com base em um algoritmo misterioso. (Isso pode ser o que eles chamam de intervenção .) Como resultado, muitas pessoas estão vendo seu layout (especialmente as barras de rolagem desejadas) funcionar como esperado no Chrome, mas não no Firefox / Edge. Esse problema é abordado com mais detalhes aqui: discrepância de flex-shrink entre Firefox e Chrome

• IE11

  Conforme observado na especificação, o autovalor para as propriedades min-widthe min-heighté "novo". Isso significa que alguns navegadores ainda podem renderizar um 0valor por padrão, porque implementaram o layout flexível antes da atualização do valor e porque 0é o valor inicial para min-widthe min-heightno CSS 2.1 . Um desses navegadores é o IE11. Outros navegadores foram atualizados para o autovalor mais recente, conforme definido na especificação do flexbox .

Demonstração revisada

.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