Automatischer Zeilenumbruch in einer DIV ohne fester breite
bearbeitet von Gunnar Bittersmann@@Rolf B
> Dadurch, dass der dependent-Paragraph absolut positioniert ist (und die section relativ), passt er sich in seiner Breite an die Section an ohne ihre Breite beeinflussen zu können.
>
> Nachteil: Man muss mit padding-bottom nachhelfen, damit der dependent-Paragraph noch innerhalb der Box der Section platziert wird. Und es gibt auch keine Chance, die Höhe der Section an die Höhe des dependent-Paragraph anzupassen; das wird Javascript brauchen.
Nein, braucht’s nicht. Wenn „dass der *dependent*{:@en}-Paragraph absolut positioniert ist“ ein Nachteil ist, ist es naheliegend, darauf zu verzichten.
Du willst, dass sich der *ruler*{:@en}[^ruler] „Im Lande Mordor, wo die Schatten droh’n!“[^apos] so breit macht wie es sein Inhalt erfordert? `width: max-content`
Die `section`-Box soll sich nicht breiter machen als es der *ruler*{:@en} erfordert? `width: min-content`
Das Ganze noch garniert mit Präfixen und `max-width: 100%` – [fertig!](https://codepen.io/gunnarbittersmann/pen/LOWwvv)
[^ruler]: Ich hab diesem Absatz mal eine Klase gegeben – das erscheint mir sinnvoller. Es wäre aber auch mit deinem Markup und `section p:not(.dependent)`{:.language-css} gegangen.
[^apos]: Ich hab den Fliegenschiss mal durch einen Apostroph ersetzt.
LLAP 🖖
PS: [Edge und IE](https://caniuse.com/#feat=intrinsic-width) versetzt man in den IE7-Modus und man macht das mit [CSS-Expressions](http://bittersmann.de/articles/css-expressions/). 🤣
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)