Propriedade width
As propriedades width, min-width e max-width são usadas para controlar a largura de um elemento. Cada uma dessas propriedades desempenha um papel específico na definição das dimensões horizontais dos elementos.
Propriedade width
A propriedade width define a largura exata de um elemento. Pode ser especificada em unidades como pixels, porcentagem, ems, entre outras.
.exemplo {
width: 200px;
}Neste exemplo, a largura do elemento com a classe .exemplo será de 200 pixels.
Propriedade min-width
A propriedade min-width estabelece a largura mínima que um elemento deve ter. Isso significa que o elemento sempre terá pelo menos a largura especificada, mas pode se expandir se o conteúdo o exigir.
.exemplo {
min-width: 100px;
}No exemplo acima, o elemento com a classe .exemplo terá uma largura mínima de 100 pixels, mas pode ser maior se o conteúdo demandar.
Propriedade max-width
A propriedade max-width define a largura máxima que um elemento pode ter. Se o conteúdo naturalmente exceder essa largura, as barras de rolagem horizontais podem ser adicionadas para permitir que o usuário role horizontalmente.
.exemplo {
max-width: 300px;
overflow-x: auto; /* Adiciona barras de rolagem horizontal, se necessário */
}No exemplo acima, o elemento com a classe .exemplo terá uma largura máxima de 300 pixels, e barras de rolagem horizontais serão adicionadas se o conteúdo exceder esse limite.
Exemplo
.caixa {
width: 250px;
min-width: 100px;
max-width: 400px;
overflow-x: auto;
}<div class="caixa">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam
repudiandae nam obcaecati hic velit rerum fugit, accusantium officiis amet distinctio.
</p>
</div>
Neste exemplo, a .caixa terá uma largura inicial de 250 pixels, uma largura mínima de 100 pixels (permitindo que ela diminua, se necessário) e uma largura máxima de 400 pixels. Se o conteúdo exceder a largura máxima, barras de rolagem horizontais serão adicionadas.