Beispiele zur Verwendung von width und min-width

min-width: 0;width: 20em;

Diese beiden Elemente

min-width: 0;width: 20em;

haben eine festgelegte Breite von 20em. Ein breiterer Inhalt sorgt nicht für eine Verbreiterung des Elements.

min-width: 20em;width: auto;

Für diese beiden Elemente

min-width: 20em;width: auto;

gilt eine minimale Breite von 20em. Bei Bedarf wird die Box breiter.

min-width: 20em;width: 10em;

Eine Angabe für min-width überschreibt dabei im Widerspruchsfall eine Breitenangabe. Für dieses Element gilt deshalb eine feste Breite von 20em.

min-width: 20em;max-width: 10em;

Auch eine gesetzte maximale Breite wird überschrieben. Dieses Element wird deshalb nicht breiter als 20em. Das lässt sich gut im Vergleich zu den oberen Boxen sehen.

min-width: 20em;width: 30em;

Wenn die angegebene (Maximal-)breite größer als die minimale Breite ist, gibt es keinen Widerspruch.

min-width: 40em;width: 50%;

Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht schmaler als 40em werden. Probieren Sie es aus, indem Sie die Breite des Browserfensters verändern.