CSS min-width / max-width

Minimale und maximale Breite

min-width und max-width regeln z.B. die Laufweite von Texten innerhalb von flexiblen Blöcken oder die Breite des body-Elements in flexiblen Layouts auf eine minimale bzw. maximale Breite.

.block { 
    display: flex; justify-content: center 
}
.q1 { 
    width: 50%; min-width: 200px; background: ivory
}
.q2 { 
    width: 50%; max-width: 100px; background: lightblue
}
@media (min-width:680px) {
    .q1 { min-width: 400px }
    .q2 { max-width: 240px }
}

• min-width: 400px erlaubt dem ersten Block, bei einem größeren Platzangebot mitzuwachsen.
• max-width: 240px beschränkt den zweiten Block auf max. 240px.

CSS min() ist das neue max-width

Wenn IE11 keine Rolle mehr spielt, fasst width: min(w1, w2) die Eigenschaften width und max-width in einem Ausdruck zusammen.

elem {
	width: 50%;
	max-width: 400px;
	width: min(400px, 50%%);
}

width: min(400px, 50%%): Die CSS-Funktion min() mit zwei Werten in den runden Klammern wählt den kleineren der beiden Werte (darum heißt es min) in den runden Klammern. Auf einem kleinen Monitor wird min zu 50%, auf einem großen Monitor in 400px die maximale Brete.

min-width

Eine Box mit min-width kann durch ein übergroßes Element – z.B. durch ein Bild – verbreitert werden.

Cookie cookie toffee pie tiramisu. Biscuit cookie muffin cupcake. Sweet roll croissant muffin candy canes chupa chups. Icing bonbon macaroon sesame snaps croissant.

Tumbnail klicken

Ein Element mit min-width kann über die Grenze seines umfassenden Blocks hinaus wachsen, aber die maximale Breite des umfassenden Blocks wird durch das übergroße Element nicht gedehnt.

width mit max-width animieren

CSS transition nutzt min-width / max-width, wenn die Breite eines animierten Elements nicht bekannt ist.

<input type="checkbox" id="grow">
<label for="grow" class="grow">
    <img src="flowers.jpg" width="980" height="371" alt="…">
</label>

<style>
input#grow { display: none; }

label.grow { 
   margin: 2em auto; 
   max-width: 200px; 
   transition: 1s; 
   display: block; cursor: pointer;
}

input#grow:checked + label.grow { max-width: 70%; }
</style>

Früher hätten wir einfach auf .grow:hover {…} gesetzt, aber das würde heute auf den Touchscreens Probleme machen. Anstelle dessen wirkt hier das CSS-Event :checked

input#grow bleibt verborgen, denn das dazugehörige label-Element wirkt genauso wie das input-Element selbst und fängt den Klick ab.

Die letzte Zeile weist label.grow die maximale Größe zu. So braucht der Overlay keine Breakpoints für unterschiedliche Monitorgrößen: Das Element passt sich immer an den verfügbaren Platz an.

CSS min-width

Erblich: Nein

min-width

gibt die minimale Breite eines Elements an. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.

Werte

<length> | <percentage> | inherit

min-width überschreibt sowohl width als auch max-width. Wenn max-width kleiner als ein zuvor definierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn der Wert für min-width größer als der aktuelle Wert für width ist, wird width auf den Wert von min-width gesetzt.

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage (Prozentsatz)

gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

CSS max-width

Erblich: Nein

max-width

gibt die maximale Breite eines Elements an. max-width gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.

Werte

<length> | <percentage> | none | inherit

none

gibt an, dass keine Einschränkungen bezüglich der Höhe des Elements gelten.

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage> (Prozentsatz)

gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

Die Voreinstellung ist 0.