Div sollte die Elternhöhe füllen

Question

Ich versuche, ein DIV füllen seinen gesamten übergeordneten Container mit reinem CSS. height:100% tut es nicht und Flexbox oder display:table auf den Eltern auch nicht :(

In dem beigefügten Code half, wir reden über die innerste div.CodeMirror

Das Problem in der aktuellen Safari tritt auf MacOS. In Chrome alles ist in Ordnung.

html, body, #root {margin: 0; padding: 0; height: 100%; } 
 
.App {display: flex; flex-flow: column; height: 100%; } 
 
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;} 
 
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf;} 
 
.CodeMirror {height: 100%; border: 1px solid #ccc;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="root"> 
 
    <div class="App"> 
 
    <nav class="navbar navbar-default"></nav> 
 
    <div class="editorContainer"> 
 
     <div style="background-color: #aaf; width: 160px;">Side bar</div> 
 
     <div class="ReactCodeMirror"> 
 
     <div class="CodeMirror">Should fill light blue area</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Zunächst einmal, stimmt etwas nicht mit der Klassendeklaration von Codemirror, nach Ihrem Code, erfordert es die div eine Unterklasse von cm-s-RoboCom enthält, das heißt:

<div class="CodeMirror cm-s-robocom">Should fill light blue area</div> 

Wenn Sie diese CSS-Deklaration wollen entweder .CodeMirror oder haben .cm-s-RoboCom, sollten Sie ein Komma zwischen verwenden:

.CodeMirror, .cm-s-robocom {height: 100%; border: 1px solid #ccc;} 

Was für mich regelte es in Safari Höhe wurde hinzugefügt: 100% sowohl editorContainer und ReactCodeMirror:

div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;height:100%;} 
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf;height:100%;} 

Also der letzte Schnipsel ist - ich denke, Sie sollten auch in der Höhe zu 100% auf der Seitenleiste hinzufügen machen es in Ordnung erscheinen:

html, body, #root {margin: 0; padding: 0; height: 100%; } 
 
.App {display: flex; flex-flow: column; height: 100%; } 
 
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;} 
 
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf; display: flex; flex: 1 1; } 
 
.CodeMirror {border: 1px solid #ccc; display: flex; flex: 1 1; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
     
 
    <div id="root"> 
 
    <div class="App"> 
 
    <nav class="navbar navbar-default"></nav> 
 
    <div class="editorContainer"> 
 
     <div style="background-color: #aaf; width: 160px; top: 0; bottom: 0; position: relative;">Side bar</div> 
 
     <div class="ReactCodeMirror"> 
 
     <div class="CodeMirror">Should fill light blue area</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

fügen Sie einfach height: 100% auf .CodeMirror (bug in Safari verursacht dies nicht pro Arbeit perly)

Also müssen Sie display: flex zu dem .CodeMirror übergeordneten, flex: 1 dem Kind hinzufügen.

html, body, #root {margin: 0; padding: 0; height: 100%; } 
 
.App {display: flex; flex-flow: column; height: 100%; } 
 
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;} 
 
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf; display: flex;} 
 
.CodeMirror {border: 1px solid #ccc; flex: 1;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="root"> 
 
    <div class="App"> 
 
    <nav class="navbar navbar-default"></nav> 
 
    <div class="editorContainer"> 
 
     <div style="background-color: #aaf; width: 160px;">Side bar</div> 
 
     <div class="ReactCodeMirror"> 
 
     <div class="CodeMirror">Should fill light blue area</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Diese Arbeit sollte

div.CodeMirror{height: 100%;}