Mitleser: Flexbox

Beitrag lesen

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.