CSS/Eigenschaften/Größenangaben/min-width

Die Eigenschaft min-width legt die Mindestbreite eines Elements fest. Die Eigenschaft unterscheidet sich nicht im Gebrauch von min-height, sie wirkt sich nur statt der Höhe auf die Breite aus.

• 
• 
• 
• 
• 
• 

Beispiel ansehen …

div > div {
  display: inline-block;
  vertical-align: top;
  height: 10em;
  width: auto;
  background-color: khaki;
  margin: 1em .5em;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.max_10 {
  max-width: 10em;
}
.min_20 {
 min-width: 20em;
}
.min_40 {
  min-width: 40em;
}
.width_10 {
  width: 10em;
}
.width_20 {
  width: 20em;
}
.width_30 {
  width: 30em;
}
.width_50p {
  width: 50%;
}

<div>
  <div class="width_20">
    <p><code>min-width: 0;</code><code>width: 20em;</code></p>
    <p>Diese beiden Elemente</p>
  </div>
  <div class="width_20">
    <p><code>min-width: 0;</code><code>width: 20em;</code></p>
    <p>haben eine festgelegte Breite von 20em. Ein breiterer
      Inhalt sorgt nicht für eine Verbreiterung des Elements.
    </p>
  </div>
</div>
<div>
  <div class="min_20">
    <p><code>min-width: 20em;</code><code>width: auto;</code></p>
    <p>Für diese beiden Elemente</p>
  </div>
  <div class="min_20">
    <p><code>min-width: 20em;</code><code>width: auto;</code></p>
    <p>gilt eine minimale Breite von 20em. Bei Bedarf wird
      die Box breiter.
    </p>
  </div>
</div>
<!-- … -->

ansehen …

Erlaubt sind folgende Werte:

• eine nicht-negative Längenangabe
• eine Prozentangabe, diese bezieht sich auf die Breite des umschließenden Blocks
• fit-content, min-content und max-content, die intrinsischen Größen für das Element.
• Werte zur Steuerung der Vererbung

Beachten Sie: Im Gegensatz zu max-width bzw. max-height ist die Angabe none nicht erlaubt. Wenn Sie explizit bestimmen müssen, dass für ein Element keine Mindestbreite gilt, definieren Sie min-width: 0.

Beachten Sie: min-width überschreibt alle Angaben für max-width und width.

Gegenüberstellung von min-width und max-width ansehen …

div {
  height: 10em;
  width: 50%;
  background-color: khaki;
  margin: 1em auto;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.min_40 {
  min-width: 40em;
}
.max_40 {
  max-width: 40em;
}
#vergleich {
  width: 40em;
  height: 2em;
  line-height: 2em;
}

<h1>min-width und max-width im Vergleich</h1>
<div class="min_40">
  <p><code>min-width: 40em;</code><code>width: 50%;</code></p>
  <p>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.</p>
</div>
<div id="vergleich">
  <p>Zum Vergleich: Diese Box ist 40em breit.</p>
</div>
<div class="max_40">
  <p><code>width: 50%;</code><code>max-width: 40em;</code></p>
  <p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht
    breiter als 40em werden. Probieren Sie es aus, indem Sie die Breite des
    Browserfensters verändern.
  </p>
</div>

ansehen …

Siehe auch

• Box-Modell