Propriedade height
As propriedades height, min-height e max-height são utilizadas para controlar a altura de um elemento. Cada uma dessas propriedades tem um papel específico na definição das dimensões verticais dos elementos.
Propriedade height
A propriedade height define a altura exata de um elemento. Pode ser especificada em unidades como pixels, porcentagem, ems, entre outras.
.exemplo {
height: 100px;
}Neste exemplo, a altura do elemento com a classe .exemplo será de 100 pixels.
Propriedade min-height
A propriedade min-height estabelece a altura mínima que um elemento deve ter. Isso significa que o elemento sempre terá pelo menos a altura especificada, mas pode se expandir caso o conteúdo o force a ser maior.
.exemplo {
min-height: 50px;
}No exemplo acima, o elemento com a classe .exemplo terá uma altura mínima de 50 pixels, mas pode ser maior se o conteúdo demandar.
Propriedade max-height
A propriedade max-height define a altura máxima que um elemento pode ter. Se o conteúdo naturalmente exceder essa altura, as barras de rolagem podem ser adicionadas para permitir que o usuário role verticalmente.
.exemplo {
max-height: 200px;
overflow-y: auto; /* Adiciona barras de rolagem vertical, se necessário */
}No exemplo acima, o elemento com a classe .exemplo terá uma altura máxima de 200 pixels, e barras de rolagem verticais serão adicionadas se o conteúdo exceder esse limite.
Exemplo
.caixa {
height: 0px;
min-height: 50px;
max-height: 100px;
overflow-y: auto;
background: #cccccc;
}<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>