CSS min() und max(), min-width und max-width

width und max-width oder min-width

Die Angaben width und max-width bzw. width und min-width in CSS sind eine bewusst eingesetzte Technik, um das Verhalten eines Elements bei unterschiedlichen Bildschirmgrößen oder Layouts zu steuern.

• Das Element bekommt eine feste Grundbreite, die aber auf kleinen Monitoren nicht überlaufen soll.

  .elem1 {
  	width: 600px;
  	max-width: 100%;
  }
  				

• Das Element passt sich flexibel an den Viewport an (90%), aber wird nie breiter als 1440px;

  .elem2 {
  	width: 90%;
  	max-width: 1440px;
  }
  					

width ist der Standardwunsch,
max-width ist der Sicherheitsgurt.

CSS min() ist das neue max-width, max() ist das neue min-width

width: min(w1, w2) fasst die Eigenschaften width und max-width in einem Ausdruck zusammen, und width: max(w1, w2) die Eigenschaften width und min-width.

min(), max() und auch clamp() gehören zu den CSS-Funktionen für dynamische Werte. Sie setzen responsive Layouts elegant und präzise um – insbesondere bei Größenangaben wie width, font-size, margin, padding, usw.

Die beiden Blöcke sitzen in einem einfachen flex-Container, der mindestens 400px breit ist und bei wachsendem Platzangebot immer auf 100% Breite mitwächst. Mit einem größeren Platzangebot soll der erste Block wachsen und immer mindestens 50% Breite halten, der zweite soll maximal 400px breit werden wie vorher.

<div class="container">
	<div class="block1"></div>
	<div class="block2"></div>
</div>

/* wächst ab 200px */
width: max(200px, 50%); 

 /* bleibt bei 400px */ 
width: min(50%, 400px);

.container {
  display: flex;
  width: max(100%, 400px);
}

.block1 {
  background: lightcoral;
  width: max(250px, 50%);
}

.block2 {
  background: lightblue;
  width: min(50%, 400px);
}

• width: max(200px, 50%); bekommt das Maximum aus 250px und 50% verfügbarer Breite
• width: min(50%, 400px); bekommt das Minimum aus 50% und 400px Breite

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.