Flex div nicht von Inhalt der Größe

Question

Hier ist beispielsweise, wie es funktionieren soll:

*{ 
 
    border: solid 1px blue; 
 
    box-sizing: border-box; 
 
/* padding: 0; */ 
 
    margin: 0; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 
.middle{ 
 
    background: gray; 
 
    width: 500px; 
 
} 
 
.footer { 
 
}

<div class="content"> 
 
    <div class="middle"> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div> 
 
    </div> 
 
</div> 
 

 
<footer class="footer"> 
 
    Footer 
 
</footer>

Und es funktioniert, aber nur in jsfiddle Beispiel und in Firefox, aber in Chrome sieht es wie folgt aus :

Aber jsfiddle Beispiel wurde in Chrome getestet. Kann mir jemand helfen?

Answer 1

Schließlich fand ich die Antwort:

flex: 1; Dies ist die Abkürzung für flex-grow, flex-shrink und flex-basis kombiniert. Die zweiten und dritten Parameter (Flex-Shrink und Flex-Basis) sind optional. Der Standardwert ist 0 1 auto.

Verwendung flex-grow: 1; anstelle von flex: 1; mein Problem lösen.

Answer 2

Versuchen Entfernen Breite von Mitte

*{ 
    border: solid 1px blue; 
    box-sizing: border-box; 
/* padding: 0; */ 
    margin: 0; 
} 

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.content { 
    flex: 1; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
} 
.middle{ 
    background: gray; 
} 
.footer { 
}