html tag Por que os itens flexíveis não diminuem além do tamanho do conteúdo?



meta tag title (1)

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

Você está encontrando uma configuração padrão de 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 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 do 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, essa especificação introduz um novo valor auto como o valor inicial das propriedades min-width e min-height definidas no CSS 2.1.

Em relação ao valor auto ...

Em um item flexível cujo overflow é visible no eixo principal, quando especificado na propriedade min-size do eixo principal do item flexível, especifica um tamanho mínimo automático . Caso contrário, calcula para 0 .

Em outras palavras:

  • O min-width: auto e min-height: auto padrões min-height: auto aplicam-se somente quando o overflow é visible .
  • Se o valor de overflow não estiver visible , o valor da propriedade min-size será 0 .
  • Portanto, overflow: hidden pode ser um substituto para min-width: 0 e 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 obtém min-height: auto por padrão.
  • Para uma explicação mais detalhada, veja este post:
    • renderização min-width diferentemente na direção do flexão: linha e flex-direção: coluna

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

Recipientes de Flex Aninhados

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

Basicamente, um item flexível de nível mais alto com min-width: auto pode impedir a redução nos itens aninhados abaixo com min-width: 0 .

Exemplos:

  • Item Flex não está encolhendo menor do que o seu conteúdo
  • Encaixando a criança no pai
  • propriedade css espaço em branco está criando problemas com flex

Notas de Renderização do Navegador

  • Chrome vs. Firefox / Edge

    Pelo menos a partir de 2017, parece que o Google Chrome está (1) revertendo para a min-width: 0 / min-height: 0 padrões ou (2) aplicando automaticamente os 0 padrões em determinadas situações com base em um algoritmo de mistério. (Isso pode ser o que eles chamam de intervention .) Como resultado, muitas pessoas estão percebendo que seu layout (especialmente as barras de rolagem desejadas) funciona como esperado no Chrome, mas não no Firefox / Edge. Esse problema é abordado com mais detalhes aqui: discrepância de flex-shrink entre o Firefox e o Chrome

  • IE11

    Conforme observado na especificação, o valor auto para as propriedades min-width e min-height é "new". Isso significa que alguns navegadores ainda podem renderizar um valor 0 por padrão, porque implementaram o layout flexível antes do valor ser atualizado e porque 0 é o valor inicial para min-width e min-height em CSS 2.1 . Um desses navegadores é o IE11. Outros navegadores foram atualizados para o valor auto 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

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

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

Assista a este video (no início, a primeira coluna é a menor, mas quando eu redimensionei a janela, é a coluna mais larga. Eu só quero respeitar as configurações flex sempre; flex size 1: 3: 4: 4)

Eu sei, configurar tamanho de fonte e preenchimento de coluna para 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>





flexbox