Moin,
in diesem Beitrag hat Matthias Apsel auf den Artikel über flexbox verwiesen.
Darauf hin wollte ich ein eigenes Beispiel machen und in Firefox testen:
<!DOCTYPE html>
<head>
<style type="text/css">
body
.flexbox {
display:-moz-box;
display:-webkit-box;
display: box;
}
#box-links {
width: 50%;
height: 500px;
background-color: red;
}
#box-rechts {
width: 50%;
height: 500px;
background-color: green;
}
</style>
</head>
<body>
<section id="box-links" class="flexbox">
<h1>1</h1>
<p>Hallo 12345678901234567890123456789012345678901234567890123456789012345678901234567890
</p>
</section>
<section id="box-rechts" class="flexbox">
<h1>2</h1>
<p>Hallo</p>
</section>
</body>
</html>
Dabei haben mich zwei Dinge irritiert:
1. Es gibt keinen Zeilenwechsel nach <h1>...</h1>
2. Der Text Hallo 12..... wird einfach abgeschnitten
Woran liegt dies?
Ich habe jetzt auch festgestellt, dass in den flexbox-Beispielen immer nur ein kurzer einzeiliger Text verwendet wurde.