Flexbox div wird nicht die volle verfügbare Höhe nehmen, wenn in div verschachtelt

Wie kann ich die Chart div in der folgenden Geige in vertikale Größe biegen, um die verfügbare Höhe zu verwenden? Ich weiß, dass diese Frage schon einmal gestellt wurde, aber ich habe versucht, ähnliche Fragen zu beantworten, die üblicherweise durch Hinzufügen von "Höhe: 100%" gelöst wurden. zu den übergeordneten Containern, aber das scheint hier nicht hilfreich zu sein und ich denke, ich muss einen Fehler mit dem flex CSS machen.Flexbox div wird nicht die volle verfügbare Höhe nehmen, wenn in div verschachtelt

Ich habe versucht, die Geige die verschachtelte Struktur unserer App darzustellen, da wir mehrere Angular Controller und Direktiven in der Ansicht beteiligt sind.

Dies wird in Chrome benötigt (obwohl es auch nicht in Firefox funktioniert).

https://fiddle.jshell.net/fb7yLs5c/

Sie können an der Unterseite meiner Geige sehen, dass ich ein weiteres Diagramm Kommentar gesetzt, die außerhalb der zwei Eltern divs des zerbrochenen liegt. Dieser wird seine Höhe tatsächlich auf den vollen vertikalen Raum ausdehnen, aber der eine innerhalb der beiden auf Angular basierenden divs nicht.

Die Idee ist, dass das Diagramm eine minimale Höhe hat ("Flex-Basis: 400px;"), aber wenn das Fenster größer als das ist, sollte es sich ausdehnen, um alle verfügbaren vertikalen Höhe zu füllen.

Quelle

2017-03-16 markhaldane

Flex Wrapper hat keine Höhe, wenn Sie es auf 100% setzen, wird das Diagramm erweitert, Sie erhalten eine Schriftrolle, weil die anderen Elemente nicht berücksichtigt werden. hier ist was
Satz flexwrapper auf 100% Höhe
alles zu tun, um die Elemente außer Ihrem Diagramm in einem div mit Position zu etwa 30% relativer und Höhe
stellen Sie die Höhe des Diagramms auf 70%
Spiel mit den Höhen setzen um Ihre Designziele zu erfüllen

Quelle

2017-03-16 12:42:46

OK Ich habe schnell versucht haben, dass: https://fiddle.jshell.net/2183zv2k/ Wie Sie Das Diagramm beginnt mit der Größenanpassung, sobald die flexWrapper-Höhe auf 100% gesetzt ist, aber wir erhalten einen Scroll für die Größe der anderen Elemente. Ich habe das relative 30% div hinzugefügt, aber jetzt bekomme ich einen leeren Bereich über dem Diagramm. Hast du das gemeint? Wir brauchen die Höhe der Steuerelemente nicht, um sie höher zu skalieren, als sie zum Füllen dieses Raums sind. Wir möchten nur, dass das Diagramm den verfügbaren Platz einnimmt. – markhaldane

fügen Sie die anderen Elemente in den leeren Bereich –

Sie müssen den übergeordneten Container zu einem flex Element machen. Und setzen Sie flex-direction:column Dann wird Ihr Code funktionieren, wie Sie es erwartet haben.

html, body { 
 
    height:100%; 
 
    margin:0; 
 
} 
 
.app { 
 
    height:100%; 
 
} 
 

 
.authorised-pane { 
 
    height: 100%; 
 
} 
 

 
#flexWrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    align-content: stretch; 
 
    min-height: 100%; /*height or min-height both work */ 
 
} 
 

 
.version { 
 
    padding:5px; 
 
    color: #777777; 
 
    font-size: 0.8em; 
 
} 
 

 
.panel-selection-style { 
 
    background-color: green; 
 
    display: flex; 
 
    flex-basis: 32px; 
 
} 
 

 
.navButton { 
 
    padding: 5px; 
 
} 
 

 
.instrumentControls { 
 
    display: flex; 
 
    background-color: orange; 
 
    flex-basis: 32px; 
 
} 
 

 
.chartControls { 
 
    display: flex; 
 
    background-color: blue; 
 
    flex-basis: 32px; 
 
} 
 

 
#chart { 
 
    background-color: yellow; 
 
    flex:50; 
 
    display: flex; 
 
    flex-basis:400px; 
 
    height: 100%; 
 
} 
 
/*additional css*/ 
 
    .panelCtrl{ 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t flex: 1 1 auto; 
 
    } 
 
    .graphCtrl { 
 
    display: flex; 
 
    flex-direction: column; 
 
\t flex: 1 1 auto; 
 
    }

<body ng-app="myApp"> 
 
<div ng-controller="MainCtrl" style="height:100%;"> 
 
    <div class="authorised-pane"> 
 
     <div ng-controller="PanelCtrl" style="height:100%;"> 
 
      <div id="flexWrapper"> 
 
       <span class="version">Version</span> 
 
       <span class="panel-selection-style"> 
 
       <!-- Buttons for panel selection, ie. choose content --> 
 
        <button class="navButton"> 
 
        Button 1 
 
        </button> 
 
        <button class="navButton"> 
 
        Button 2 
 
        </button> 
 
        <button class="navButton"> 
 
        Button 3 
 
        </button> 
 
        <button class="navButton"> 
 
        Button 4 
 
        </button> 
 
        <button class="navButton"> 
 
        Button 5 
 
        </button> 
 
       </span> 
 

 
       <div class="panelCtrl" ng-show="panelCtrl.tabs.graph" style="height:100%;"> 
 
        <div class="graphCtrl" ng-controller="GraphCtrl" ng-include="graph.html" style="height:100%;"> 
 

 
         <!--now inside ng-included graph.html--> 
 
         <span class="instrumentControls"> 
 
         <button class="navButton"> 
 
         Instrument Control 1 
 
         </button> 
 
         <button class="navButton"> 
 
         Instrument Control 2 
 
         </button> 
 

 
          <!--contents of a replay toolbar directive--> 
 
         <span> 
 
         <button></button> 
 
         <button></button> 
 
         </span> 
 
         <span> 
 
         <button>></button> 
 
         <button>>></button> 
 
         </span> 
 

 
          <!--End of instrument controls --> 
 
        </span> 
 

 
         <!-- contents of chart directive --> 
 
         <div class="chartControls"> 
 
          <button class="navButton"> 
 
           ToB 
 
          </button> 
 
          <button class="navButton"> 
 
           DoB 
 
          </button> 
 
         </div> 
 

 
         <div id="chart"> 
 
          Chart should fill full height 
 
         </div> 
 
         
 
         </span> 
 

 
        <!-- GraphCtrl end --> 
 
        </div> 
 
        
 
       <!-- ngShow end --> 
 
       </div> 
 

 
<!--     <div id="chart" style="background-color: red;"> 
 
        Commented out Chart here DOES fill full height 
 
       </div> --> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body>

Hier ist eine Geige aus dem obigen Beispiel https://fiddle.jshell.net/azs06/zL3tddyf/1/

Quelle

2017-03-16 13:49:50 azs06

Danke, aber es sieht so aus, dass nur die Höhe bis zum Wert der Flex-Basis (400px) flex und dann wird es den Rest des Raumes nicht füllen – markhaldane

Hey, Entschuldigung hat nicht funktioniert, ich habe meinen Code aktualisiert, jetzt sollte es auf volle Höhe strecken, hier ist ein Jsbin des Codes https://jsbin.com/dejesef/edit?html,css,output – azs06

Flexbox div wird nicht die volle verfügbare Höhe nehmen, wenn in div verschachtelt

Antwort

Verwandte Themen