Eine Geschichte über `width` und `max-width`

Letzte Woche kam in den Kommentaren eines unserer Beiträge, Considerations for Styling a Modal, eine interessante Unterhaltung auf.

Sie möchten vielleicht die Breite eines Modals begrenzen, richtig? Das verleiht ihm auf größeren Bildschirmen diesen "modalen" Look. Nehmen wir an, 600 Pixel erscheinen richtig. Aber Sie möchten sicherstellen, dass es nicht aus seinem übergeordneten Element herausragt. Vermeiden Sie zum Beispiel, dass auf einem mobilen Bildschirm eine horizontale Scrollleiste entsteht.

Wie würden Sie das tun?

1. width: 600px; max-width: 100%;
2. width: 100%; max-width: 600px;

Die Antwort: Es spielt eigentlich keine Rolle, es ist dasselbe.

Einige Reaktionen einiger Leute

• Die zweite ist „korrekter“
• Tatsächlich ein sehr großer Unterschied
• Die zweite wäre freundlicher für eine schmalere Elternbreite
• Die erste ist Müll
• Die zweite beschreibt das Verhalten logischer

Ich stimme zu, es ist irgendwie verwirrend. Sie scheinen unterschiedlich zu sein. Ein reduzierter Testfall ist immer ein guter Plan.

Das könnte eine nützliche Denkweise sein: Wenn das Element breiter gerendert würde, als max-width erlaubt, gewinnt max-width.

Szenarien

• Übergeordnetes Element ist 1000 Pixel breit
  • Width sagt, dass das Element 600 Pixel breit sein soll. Das verstößt nicht gegen die max-width-Regel, also sind es 600 Pixel!
  • Width sagt, dass das Element 1000 Pixel breit sein soll. Das verstößt gegen die max-width-Regel, daher wird das Element auf 600 Pixel gezwungen.
• Übergeordnetes Element ist 320 Pixel breit
  • Width sagt, dass das Element 600 Pixel breit sein soll. Das verstößt gegen die max-width-Regel, die besagt, dass das Element höchstens 320 Pixel breit sein darf, also sind es 320 Pixel!
  • Width sagt, dass das Element 320 Pixel breit sein soll. Das verstößt nicht gegen die max-width-Regel, also sind es 320 Pixel!

Ob das übergeordnete Element breiter oder schmaler ist, diese unterschiedlichen Regelwerke stimmen überein. (Es gibt jedoch einen Unterschied, wenn es sich um Flex-Elemente handelt.)