Propriedades mínima e máxima de largura / altura em CSS

Tradução de " Largura e altura mínima e máxima em CSS " por Ahmad Shadid.

Às vezes, os desenvolvedores precisam limitar a largura do elemento em relação ao pai e, ao mesmo tempo, deixá-lo dinâmico. Definindo desta maneira o tamanho inicial com a possibilidade de expansão na presença de espaço disponível. Por exemplo, precisamos de um botão que deve ter uma largura mínima. É nessas situações que é conveniente usar as propriedades de máximo e mínimo.

Neste artigo, vamos nos familiarizar com as propriedades CSS de máximo e mínimo para largura e altura e também dar uma olhada detalhada em cada um deles e em seus casos de uso.

Propriedades da largura

Gostaria de iniciar a discussão com as propriedades relacionadas à largura. Temos min-width max-width, e cada uma delas é extremamente importante e útil em determinadas situações.

Largura mínima (largura mínima)

A propriedade min-width destina-se a impedir que a largura do elemento seja reduzida abaixo do valor especificado. O valor padrão é auto , que pode ir até 0 .

Para demonstrar, vejamos um exemplo básico:



Há um botão com texto, cujo tamanho pode variar de uma a várias palavras. Para ter certeza de que esse botão terá a largura mínima permitida, mesmo se houver apenas uma palavra, você precisará usar min-width . A largura mínima foi definida como 100px, portanto, mesmo que o botão tenha conteúdo muito curto, como apenas a palavra “Concluído” ou apenas um ícone, ele ainda será grande o suficiente para permanecer perceptível. Isso é especialmente importante quando você trabalha com sites traduzidos para diferentes idiomas.

Considere o exemplo do idioma árabe no Twitter:



No exemplo acima, o botão contém a palavra "تم", que em árabe significa "Concluir". Devido ao conteúdo curto, a largura do botão em si se tornou muito pequena, por isso defina o mínimo definindo a propriedade min-width , que pode ser vista na imagem à direita (na seção “Depois”).

Largura e preenchimento mínimos

Embora a propriedade min-width permita um aumento na largura de um botão enquanto aumenta o tamanho do seu conteúdo, o padding ainda deve ser definido nas laterais para garantir um recuo das bordas. A diferença é mostrada na figura abaixo.

Largura máxima (largura máxima)

A propriedade max-width foi projetada para impedir que o elemento se expanda além do valor especificado. O valor padrão é none .

Um exemplo comum e simples de usar a largura máxima é aplicá-lo às imagens. Considere o exemplo abaixo:



Se aplicarmos a propriedade max-width: 100% à imagem, ela permanecerá dentro dos limites do elemento pai, mesmo que seu tamanho original seja maior. Se a imagem for inicialmente menor que a mãe, essa propriedade não a afetará de forma alguma.

Usando largura mínima e largura máxima

Se ambas as propriedades se aplicarem a um elemento, qual delas substituirá o valor da outra? Em outras palavras, qual propriedade tem maior prioridade?

Se o valor da min-width maior que max-width , será considerada a largura do elemento. Considere o seguinte exemplo:

HTML

 <div class="wrapper"> <div class="sub"></div> </div> 

CSS

 .sub { width: 100px; min-width: 50%; max-width: 100%; } 

O valor da width inicial é 100px e, além disso, as propriedades min-width max-width são definidas. Como resultado, a largura deste elemento não excederá 50% da largura do bloco pai

Propriedades de altura

Além das propriedades de largura mínima e máxima, existem as mesmas propriedades para altura

Altura mínima (altura mínima)

A min-height projetada para impedir que o elemento fique abaixo do valor especificado. O valor padrão é auto , que pode ir até 0 .

Para demonstrar, vejamos um exemplo simples.

Temos uma seção com conteúdo de texto. É necessário que fique bonito com grandes e pequenas quantidades de texto



CSS

 .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; } 

A altura mínima é definida como 100px e o conteúdo é centralizado usando o flexbox horizontal e verticalmente. O que acontece se houver mais conteúdo? Por exemplo, haverá um parágrafo inteiro



Sim, você já adivinhou. A altura da seção aumentará para acomodar mais conteúdo. Com isso, podemos criar componentes flexíveis que respondem à quantidade de conteúdo.

Altura máxima (altura máxima)

A max-height projetada para impedir que um elemento aumente sua altura além de um valor especificado. O valor padrão é none .

No exemplo a seguir, defino max-height para o conteúdo. Mas, como é maior que a área especificada, ocorre um estouro e o texto ultrapassa os limites do elemento pai

Exemplos de uso de propriedade

Considere alguns casos de uso comuns e raros para as propriedades min-width , min-height , max-width e max-height .

Lista de tags

Recomenda-se indicar a largura mínima de cada tag na lista de tags para que sua aparência não sofra em caso de conteúdo curto.



Com essa flexibilidade, uma tag ficará bem, independentemente do tamanho do seu conteúdo. Mas o que acontece se o autor definir um nome de tag muito grande e o CMS (sistema de gerenciamento de conteúdo) que ele usa não tem limite no número de caracteres na tag? Nessa situação, você também pode usar max-width

CSS

 .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*Other styles*/ } 

Usando max-width você pode limitar a largura máxima a um valor específico. No entanto, aplicar essa propriedade sozinha não é suficiente. O conteúdo que excede a largura máxima deve ser truncado.

https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

Botões

Existem diferentes cenários para o uso das propriedades mínima e máxima dos botões, pois também existem muitas opções para os componentes dos botões. Considere o seguinte layout:



Observe que a largura do botão "Obter" é muito pequena. Se, por algum motivo, o botão ainda não tiver texto (mas apenas um ícone), tudo poderá ficar ainda pior. Nesse caso, definir a largura mínima é muito importante

Zerar a largura mínima para o Flexbox

O valor padrão da propriedade min-width é auto, que é avaliado como zero. Quando um item é um item flexível, o valor de min-width não se torna zero. O tamanho mínimo de um elemento flexível é o tamanho do seu conteúdo.

De acordo com o CSSWG :
Por padrão, os itens flexíveis não se tornam menores que o tamanho mínimo exigido por seu conteúdo (o comprimento da palavra ou item mais longo com um tamanho fixo). Para alterar isso, defina a propriedade min-width ou min-height .

Considere o seguinte exemplo:



O nome de usuário contém uma palavra muito longa que causa excesso e rolagem horizontal. Embora eu tenha adicionado o CSS abaixo para truncar o conteúdo:

CSS

 .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

Como o cabeçalho é um elemento flexível, a solução é redefinir o valor da largura mínima e torná-lo zero

CSS

 .c-person__name { /*Other styles*/ min-width: 0; } 

Aqui está como deve ficar após a correção:



Segue-se da descrição do CSSWG que definir a propriedade overflow com um valor diferente de visible pode fazer com que o valor da largura mínima seja calculado como zero, o que também resolve nosso problema sem precisar definir explicitamente min-width: 0 .

Altura mínima zero para Flexbox

Embora esse seja um problema menos comum em comparação com a largura mínima, ele ainda pode ocorrer. O problema está nos itens flex que não podem ser menores que seu conteúdo. Como resultado, o valor da min-height é definido igual ao tamanho do conteúdo.

Considere o seguinte exemplo:



O texto em vermelho deve ser aparado pelas bordas do contêiner. Mas como esse elemento é um elemento flexível, sua min-height é igual à altura do conteúdo. Para evitar isso, devemos redefinir o valor mínimo da altura. Vamos dar uma olhada no código HTML e CSS:

HTML

 <div class="c-panel"> <h2 class="c-panel__title"><!-- Title --></h2> <div class="c-panel__body"> <div class="c-panel__content"><!-- Content --></div> </div> </div> 

CSS

 .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; } 

Adicionar um elemento min-height: 0 redefinirá o valor da propriedade e começará a funcionar conforme o esperado
Demo

Usando largura mínima e largura máxima ao mesmo tempo

Às vezes, há situações em que temos um elemento com uma largura mínima, mas, ao mesmo tempo, a largura máxima não é especificada. Isso pode levar o elemento a se tornar muito amplo, embora esse comportamento não tenha sido planejado. Considere o seguinte exemplo:



Como a largura é definida em pixels, não há certeza de que o acima funcionará para dispositivos móveis. Para resolver esse problema, podemos usar porcentagens em vez de pixels para as propriedades mínima e máxima. Considere o exemplo abaixo:

Adicionei o seguinte CSS para as imagens:

CSS

 img { min-width: 35%; max-width: 70%; } 

Contêiner de Página

Um dos cenários mais úteis para usar a propriedade max-width é quebrar a página (ou contêiner). Ao definir a página para a largura máxima, podemos ter certeza de que será conveniente para os usuários visualizar e ler o conteúdo



Abaixo está um exemplo de um invólucro centrado com padding esquerdo e direito

CSS

 .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } 

Largura máxima e unidade de medida "ch"

A unidade de medida ch é igual à largura do caractere 0 (zero) usado na fonte do elemento atual. Utilizando-o na propriedade max-width, podemos ajustar o número de caracteres em uma string. De acordo com este artigo da Smashing Magazine, o comprimento de linha recomendado é de 45 a 75 caracteres.

No exemplo anterior, com um elemento wrapper, poderíamos nos beneficiar do uso desse símbolo, pois ele é um elemento de artigo

CSS

 .wrapper { max-width: 70ch; /* Other styles */ } 

Animar um elemento com uma altura desconhecida

Às vezes, nos deparamos com o problema de animar um acordeão ou um menu móvel com uma altura de conteúdo desconhecida. Nesse caso, o uso max-height pode ser uma boa solução.

Considere o seguinte exemplo:



Quando o botão menu é pressionado, o próprio menu deve aparecer suavemente de cima para baixo. É impossível fazer isso sem JavaScript, a menos que o elemento tenha uma altura fixa (e isso não é recomendado). No entanto, isso é possível com a altura máxima. A idéia é adicionar uma altura muito alta ao elemento, por exemplo, max-height: 20rem , que não será atingido, após o qual podemos definir as etapas de animação de max-height: 0 até max-height: 20rem

CSS

 .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; } 

Clique em um hambúrguer para ver a animação em ação

Altura mínima para a seção superior (herói)

Como você pode ver, não gosto de dar aos elementos uma altura fixa. Sinto que, ao fazer isso, vou contra o conceito de que os componentes na Web devem ser flexíveis. Adicionar uma altura mínima para a primeira seção do site (a seção "herói") é útil em situações em que conteúdo muito grande é adicionado (isso acontece).

Considere o exemplo a seguir, onde temos uma seção "herói" com uma altura fixa. Parece bom.



No entanto, quando o conteúdo cresce, ele excede o contêiner e vai além do wrapper da seção. Isso é ruim.



Para evitar esse problema com antecedência, podemos adicionar min-height vez de min-height . Fazemos exatamente isso, pelo menos para limpar nossa consciência. Mesmo que esse seja o motivo de uma exibição de página bastante estranha, acredito que essas situações devam ser evitadas em primeiro lugar, no sistema de gerenciamento de conteúdo (CMS). Depois disso, o problema foi corrigido e a página parece boa:



O problema de transbordar conteúdo não é apenas o fato de ele poder ser maior que a altura fixa do pai. Isso pode acontecer como resultado de uma diminuição no tamanho da tela e, como resultado, um aumento na altura do conteúdo do texto devido à hifenização:



Se você não especificar uma altura fixa, mas limitá-la ao mínimo usando min-height , o problema descrito acima não ocorrerá.

Janela modal

Para o componente da janela modal, você deve especificar a largura mínima e máxima, portanto, isso funcionará em telas de qualquer tamanho (de móvel a desktop). Isso lembra um artigo interessante sobre CSS-Tricks, que diz o que fazer nesse caso.

1 via

 .c-modal__body { width: 600px; max-width: 100%; } 

2 vias

 .c-modal__body { width: 100%; max-width: 600px; } 

Quanto a mim, prefiro a segunda maneira, pois só preciso definir max-width: 600px . Uma janela modal é um elemento div , portanto, ela já possui uma largura definida = 100% do pai, certo?

Considere o exemplo da janela modal abaixo. Observe como a largura se torna 100% da largura do pai, se não houver espaço livre suficiente na janela de exibição

Altura mínima e rodapé pegajoso

Quando o conteúdo da página não é grande o suficiente, não se espera que o rodapé fique na parte inferior. Vejamos um exemplo que demonstra melhor isso:



Observe que o rodapé não gruda na borda inferior da janela do navegador. Isso ocorre porque a altura do conteúdo é menor que a altura da janela do navegador. Depois de resolver esse problema, a página deve ficar assim:



Primeiro, fiz do elemento body um contêiner flexível e, em seguida, configurei-o para uma altura mínima de 100% da viewport.

CSS

 body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; } 

Eu recomendo a leitura deste artigo sobre rodapés.
Demo

Tamanhos proporcionais de elementos e largura / altura máximas

Para criar um contêiner proporcional que seja escalonado, dependendo do tamanho da janela de visualização, um hack foi apresentado usando preenchimento . Agora podemos simular um comportamento semelhante combinando unidades de janela de visualização e largura / altura máximas.

Com base nos materiais de um artigo de Miriam Suzanne, quero explicar como isso funciona.



Temos uma imagem com dimensões de 644 x 1000 pixels. Precisamos fazer o seguinte:

• Proporção: height / width (altura dividida pela largura)
  
• Largura do recipiente: pode ser fixo ou dinâmico (100%)
  
• Defina a height para 100% da largura da janela de visualização multiplicada pela proporção
  
• Definir max-height igual à largura do contêiner vezes a proporção
  
• Definir max-width igual à largura do contêiner
  

CSS

 img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); } 

HTML / corpo com uma altura de 100%

E se quisermos que o elemento body ocupe 100% da altura da viewport? Essa é uma pergunta comum na comunidade da Web como um todo e no site StackOverflow em particular.

Primeiro, você precisa definir height: 100% para o elemento html . Isso garantirá que o elemento raiz seja 100% alto. Em seguida, adicione min-height para o elemento body . O motivo pelo qual min-height é usada é porque essa propriedade permite que a altura do elemento do body seja dinâmica e ajuste o tamanho do conteúdo

CSS

 html { height: 100%; } body { min-height: 100%; } 

Demo

Anotações

Elementos mínimos de largura e bloco

Às vezes esquecemos que o elemento no qual estamos tentando aplicar min-width é block. No final, isso pode ser confuso e não afetar o elemento. Verifique se o item não está bloqueado

Funções de comparação CSS

Ao pesquisar no StackOverflow os principais problemas que os desenvolvedores enfrentam, deparei-me com esta pergunta na qual o autor faz o seguinte:

É possível fazer algo assim? max-width: calc(max(500px, 100% - 80px)) ou talvez seja max-width: max(500px, calc(100% - 80px)))

O comportamento desejado é manter a largura do elemento não mais que 500 px. Se a largura do escopo não for suficiente para acomodar o elemento, ela deverá ser de 100% – 80px .

Quanto à solução publicada em resposta à pergunta, tentei aplicá-la e ela funciona no Chrome 79 e Safari 13.0.3. Embora isso esteja além do escopo do artigo, ainda darei uma solução aqui:

CSS

 .yourselector { max-width: calc(100% - 80px); } /* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */ @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } } 

Fontes e materiais para estudos adicionais

• Itens flexíveis e largura mínima: 0 by Dominic McPhee
• CSS: Flex e “min-width” de Dominik Schöler
• Flexbugs por Philip Walton