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

Mar 27 2016

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

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

Assista a este vídeo (no início, a primeira coluna é a menor, mas quando redimensionei a janela, é a coluna mais larga. Eu 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 para menores ajudará ... mas há 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>

Respostas

619 MichaelBenjamin Mar 27 2016 at 19:41

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 de 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 direção da coluna, respectivamente.

Você pode substituir esses padrões definindo 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íveis, 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 flex item que overflowestá visibleno eixo principal, quando especificado na propriedade min-size do eixo principal do flex item, 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 overflowé visible.
Se o overflowvalor não for visible, o valor da propriedade min-size será 0.
Portanto, overflow: hiddenpode ser um substituto para min-width: 0e min-height: 0.

e...

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

Você aplicou min-width: 0 e o item ainda não encolhe?

Contêineres Flex aninhados

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

Basicamente, um item flexível de nível superior com min-width: autopode evitar o encolhimento em 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) revertendo para os padrões min-width: 0/ min-height: 0ou (2) aplicando automaticamente os 0padrões em certas 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. Este problema é abordado com mais detalhes aqui: discrepância flex-shrink entre Firefox e Chrome
IE11

Conforme observado nas especificações, o autovalor das 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 nas especificações 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

2 voracity Aug 24 2020 at 15:40

Estou descobrindo que isso me incomodou repetidamente ao longo dos anos, tanto para flex quanto para grade, então vou sugerir o seguinte:

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

e depois é só usar min-width: autoou min-height: autose precisar desse comportamento.

Na verdade, inclua o tamanho da caixa também para tornar todo o layout mais lógico:

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

Alguém sabe se existem consequências estranhas? Não encontrei nada em vários anos usando uma combinação dos itens acima. Na verdade, eu não consigo pensar em nenhum caso em que eu queira fazer o layout do conteúdo para fora para o flex / grade, ao invés de flex / grade para dentro do conteúdo --- e certamente se eles existem, são raros. Portanto, isso parece um padrão ruim. Mas talvez eu esteja faltando alguma coisa?