Propriedade CSS min-width
Use a propriedade CSS min-width para definir a largura mínima da área de conteúdo de um elemento. Veja valores e exemplos.
A propriedade min-width define a largura mínima de um elemento. Ela impede que o valor da propriedade width diminua abaixo do valor que você atribui a min-width, independentemente de quão estreito o espaço disponível se torne.
Esta página abrange o que min-width faz, como ela interage com width e max-width, os valores que aceita (incluindo as palavras-chave min-content/max-content/fit-content), e o problema comum no Flexbox que min-width resolve.
Como min-width interage com width e max-width
Quando você usa min-width em conjunto com as propriedades width e max-width, min-width atua como um limite inferior. O navegador calcula a largura e, em seguida, a restringe ao intervalo min-width … max-width:
- Se
widthfor menor quemin-width, o elemento é alargado paramin-width. - Se
widthfor maior quemax-width, o elemento é reduzido paramax-width.
Em outras palavras, min-width prevalece sobre um width menor, e max-width prevalece sobre um min-width maior — min-width sempre tem precedência quando os dois entram em conflito. É isso que faz os elementos permanecerem legíveis enquanto ainda são responsivos: o elemento pode crescer em telas largas, mas nunca colapsar abaixo de um tamanho utilizável.
Um uso comum no mundo real é evitar que uma coluna, cartão ou botão se torne muito estreito dentro de um layout Flexbox ou grid, onde os filhos de outra forma encolheriam para caber.
Valores de comprimento negativos são ilegais — min-width aceita apenas 0 ou um comprimento/percentagem positivo.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos, exceto elementos inline não substituídos, linhas de tabela e grupos de linhas. |
| Herdado | Não. |
| Animável | Sim. A largura é animável. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.minWidth = "200px"; |
Sintaxe
min-width: <length> | <percentage> | min-content | max-content | fit-content | auto | initial | inherit;A propriedade aceita um comprimento CSS (px, pt, em, rem, entre outros), uma percentagem do bloco contendo, ou uma das palavras-chave de tamanho intrínseco descritas na tabela de Valores abaixo.
Exemplos
Valor em percentagem
Quando min-width é uma percentagem, ela é resolvida em relação à largura do bloco contendo. Aqui width: 10px é substituído porque o min-width de 70% é maior, então o elemento é alargado para 70% de seu pai:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
div {
width: 10px;
min-width: 70%;
background-color: #1c87c9;
color: #ffffff
}
</style>
</head>
<body>
<div>The min-width of this text is defined as 70%.</div>
</body>
</html>Resultado
Valor de comprimento fixo
Neste exemplo, um min-width de 10cm é atribuído a um elemento inline-block. Ele é comparado com um span simples que tem min-width: 0, para que você possa ver como o limite mínimo força a segunda caixa a permanecer com pelo menos 10cm de largura, mesmo que o texto seja curto:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
span {
background-color: #ccc;
min-width: 0;
}
.example {
min-width: 10cm;
display: inline-block;
}
</style>
</head>
<body>
<h2>Min-width property example</h2>
<h3>Min-width: 0:</h3>
<span>Minimum width is set to 0.</span>
<h3>min-width: 10cm:</h3>
<span class="example">Minimum width is set to 10cm.</span>
</body>
</html>O problema do Flexbox com min-width: 0
Por padrão, um item flex não pode encolher abaixo do tamanho de seu conteúdo — seu min-width implícito é auto, não 0. É por isso que palavras longas, blocos de código ou elementos <pre> dentro de um contêiner flex podem transbordar e esticar todo o layout em vez de quebrar ou rolar.
A solução é definir min-width: 0 explicitamente no item flex para que ele possa encolher além do tamanho de seu conteúdo:
.flex-item {
min-width: 0; /* allow this item to shrink below its content width */
overflow: hidden; /* or use overflow-x: auto for scrollable content */
}Consulte overflow e flex para mais informações sobre como controlar o comportamento do conteúdo reduzido.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
length | Define uma largura mínima em px, pt, cm, em, etc. O valor padrão é 0. | Experimente » |
% | Define a largura mínima como uma percentagem da largura do elemento contendo. | Experimente » |
min-content | A menor largura que o conteúdo pode ter sem transbordar (por exemplo, a palavra mais longa). | |
max-content | A largura que o conteúdo teria se nunca quebrasse. | |
fit-content | Usa o espaço disponível, mas nunca mais que max-content. | |
auto | O padrão — resolve para 0 na maioria dos elementos, mas para o tamanho do conteúdo em itens flex. | |
initial | Faz a propriedade usar seu valor padrão (0). | Experimente » |
inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
width— define a largura preferida quemin-widthrestringe.max-width— define o limite superior do intervalo de largura.min-height— o equivalente vertical demin-width.box-sizing— controla se o padding e as bordas contam para a largura.