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

313

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>

tomas657
fonte

Respostas:

543

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


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:


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

jsFiddle

Michael Benjamin
fonte
2
Eu tinha uma tag pai <fieldset> muito mais alta no domínio, o que causou o mesmo problema. Definir sua largura mínima como 0 corrigiu.
Jan Swart
1
Quaisquer pensamentos sobre este: stackoverflow.com/a/36247448/8620333 .. Achei que tem a ver com, min-widthmas não tenho certeza sobre todos os detalhes.
Temani Afif 28/11
3
Parece que o Chrome alterou o comportamento na v73 para não encolher menor que o conteúdo.
maccam94
2
A mesma correção trabalhada min-height: 0;. Eu tive que tentar definir isso para vários elementos mais altos na árvore.
Ben Wheeler
Eu tive que instalar min-height: 0;em 10 locais para fazê-lo funcionar. Obrigado, obrigado, obrigado pela ótima dica!
dave0688 11/02