Min Max Height Width

A propriedade min-height, max-height, min-width e max-width não é tão conhecida e usada, porém em muitos casos é bem útil e até mesmo necessária.
Imagine que você precise que uma determinada DIV aumente sua altura (heigth) automaticamente quando o conteúdo da mesma vai aumentando, a DIV deve aumentar junto com o conteúdo empurrando o resto dos componentes do site junto com o aumento dela. Até aí tudo bem, porém você quer que a DIV já comece com uma altura fixa, e seu conteúdo inicial não alcança essa largura, para isso você define um height como no exemplo abaixo, usando essas configurações do CSS...

border:1px #FF0000 dashed;
color:#F00;
height:100px; /* altura */
width:200px; /* largura */

A DIV ficara assim...

Como o conteúdo contido nela não ultrapassa sua altura e largura ela fica do jeito que você gostaria, mas caso o conteúdo aumente dinamicamente que na maioria dos sistemas acontecem, veja o que aconteceria...

Como você definiu um tamanho fixo ela não vai aumentar conforme o conteúdo dela aumenta, então como poderemos fazer com que ela acompanhe seu conteúdo mesmo definindo o seu tamanho inicial para não quebrar o layout?

Claro que você pode até conseguir fazer isso usando DIVs umas dentro das outras com a ajuda do float, mas é bem mais complicado assim e pode não dar o resultado esperado, para isso foi feito essa propriedade CSS que acho bem útil que é MIN e MAX

Veja como ficaria essa mesma DIV com o min-height no lugar do heigth, obtendo pouco conteúdo...

border:1px #FF0000 dashed;
color:#F00;
min-height:100px; /* altura minima */
width:200px; /* largura */

Aparentemente não mudou nada não é mesmo? Mas e se o conteúdo dela aumentar dinamicamente, o que aconteceria?

Muito bom não é mesmo? Agora você ja pode definir uma altura mínima com o min-height ou uma altura máxima usando o max-height, isso também serve com a largura (width), usando o min-width e o max-width

Essa propriedade também é muito útil para usar nas textarea dos seus form, caso você queira desabilitar que a textarea possa aumentar arrastando o seu canto inferior direito, veja mais esse exemplo de uma textarea sem definição do max-width e max-height, faça o teste arraste a textarea e perceba que você pode aumentá-la o quanto quiseres...

Veja o css sem o max-width e max-height...

border:1px #00FF00 solid
padding-bottom: 30px; /* apenas para aumentar um pouco sua area */

Agora aumente de novo o seu tamanho, porém vamos definir um max-width e max-height, segue o css...

border:1px #00FF00 solid
padding-bottom: 30px; /* apenas pra aumentar um pouco sua area */
max-width: 700px; /* largura maxima de 700px */
max-height: 100px; /* altura maxima de 100px */

Como foi definido um max-width e um max-height, você não vai poder aumentar além das suas definições. Incrível não é mesmo, depois que descobri essas propriedades consegui montar layouts com mais facilidade, sem quebrar a cabeça pensando em como arrumar aquela div que deveria ter uma tamanho fixo, mas caso o seu conteúdo aumente dinamicamente, não passe dos seus limites e não quebre todo o layout.