verschachtelter Flex-Container, der sich nicht auf den verbleibenden Platz ausdehnt

Question

Ich versuche ein einfaches Flexbox-Layout mit verschachtelten Containern zu erstellen.

Es funktioniert gut, wenn ich einen einzigen Container habe und die volle Breite + Höhe verwenden.

Das Problem besteht darin, verschachtelten Container auch mit einem display: flex, irgendwie der verschachtelte Container verwendet nicht den gesamten verbleibenden Raum (Es funktioniert nur, wenn sie eine definierte Breite/Höhe haben).

screenshot of the problem

jsfiddle view of the problem

<div class="flexbox-parent"> 
<div class="flexbox-item header"> 
    Header 
</div> 

<div class="flexbox-item fill-area content flexbox-item-grow"> 
    <div class="fill-area-content flexbox-item-grow"> 
     <div class="flexbox-parent"> 
      <div class="flexbox-item header"> 
       2nd layer header 
      </div> 
      <div class="flexbox-item fill-area content flexbox-item-grow"> 
       <div class="fill-area-content flexbox-item-grow"> 
        <strong>How to make this section use all the remaining space? </strong><br/> 
        It should also overflow:auto if too much data. 
        <br/> 

       </div> 
      </div> 
      <div class="flexbox-item footer"> 
       2nd layer Footer 
      </div> 
     </div> 
    </div> 
</div> 

<div class="flexbox-item footer"> 
    Footer 
</div> 

html, body 
{ 
    width: 100%; 
    height: 100%; 
} 

.flexbox-parent 
{ 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    height: 100%; 
    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */ 
    background: rgba(255, 255, 255, .1); 
} 

.flexbox-item {padding: 8px;} 
.flexbox-item-grow { 
    flex: 1; /* same as flex: 1 1 auto; */ 
} 

.flexbox-item.header { background: rgba(255, 0, 0, .1);} 
.flexbox-item.footer { background: rgba(0, 255, 0, .1);} 
.flexbox-item.content{ background: rgba(0, 0, 255, .1);} 

.fill-area 
{ 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */ 
} 
.fill-area-content{ 
    background: rgba(0, 0, 0, .3); 
    border: 1px solid #000000; 

    /* Needed for when the area gets squished too far and there is content that can't be displayed */ 
    overflow: auto; 
} 

Answer 1

eigentlich schon die Antwort auf this stackoverflow thread

Erste das Kind eines Flex-Element gibt Höhe 100% zu füllen

1. Sollposition: relativ; auf dem Elternteil des Kindes.
2. Sollposition: absolut; auf das Kind.
3. Sie können dann Breite/Höhe wie erforderlich einstellen (100% in meiner Probe).

Updated fiddle

<div class="flexbox-parent"> 
    <div class="flexbox-item header"> 
     Header 
    </div> 

    <div class="flexbox-item fill-area content flexbox-item-grow"> 
     <div class="fill-area-content flexbox-item-grow" style="position:relative;"> 
      <div class="flexbox-parent" style="position:absolute;"> 
       <div class="flexbox-item header"> 
        2nd layer header 
       </div> 
       <div class="flexbox-item fill-area content flexbox-item-grow"> 
        <div class="fill-area-content flexbox-item-grow"> 
         <strong>How to make this section use all the remaining space? </strong><br/> 
         It should also overflow:auto if too much data. 
         <br/> 

        </div> 
       </div> 
       <div class="flexbox-item footer"> 
        2nd layer Footer 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="flexbox-item footer"> 
     Footer 
    </div> 
</div> 

Answer 2

.flexbox-item {padding: 8px;} 

Sie etwas Padding in dieser Klasse hinzuzufügen. Und sehen Sie dies

<div class="flexbox-item fill-area content flexbox-item-grow"> 
      <div class="fill-area-content flexbox-item-grow"> 
       <strong>How to make this section use all the remaining space? </strong><br/> 
       It should also overflow:auto if too much data. 
       <br/> 

      </div> 
     </div> 

Der übergeordnete hat "flexbox-item" -Klasse. So ist es das Hinzufügen einiger padd zwischen Ihnen „Artikel mit dem Text“ und Ihr Flex Container

Updated Fiddle