Div should fill parent height

Question

I am trying to make a DIV fill its whole parent container with pure CSS. height:100% doesn't do it and flexbox or display:table on the parent also didn't help :(

In the attached code, we're talking about the innermost div.CodeMirror

The problem occurs in the latest Safari on MacOS. In Chrome all is fine.

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>

possible duplicate: http://stackoverflow.com/q/33636796/3597276 — Michael Benjamin, Feb 13 '17 at 13:22

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

Just add height: 100% on .CodeMirror (bug in Safari causes this to not work properly)

So you will need to add display: flex to the .CodeMirror parent, flex: 1 to the child.

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>

edited May 23 '17 at 12:24

Community

1
1

answered Feb 13 '17 at 12:34

pol

2,641
10
16

Ah... this got messed up when I tried to simplify the code for posting it here and I removed the class only from the HTML but forgot to remove it also from the CSS selector. I fixed that now. But anyways, `height: 100%` on `.CodeMirror` doesn't do the trick. – travelboy Feb 13 '17 at 12:43
Works for me on Firefox and Chrome. – pol Feb 13 '17 at 13:17
Works in Chrome, doesn't work on latest Safari. Other styles possibly have an effect (the whole thing includes bootstrap), but they can be overridden if necessary. – travelboy Feb 13 '17 at 13:24
What happens when you add `flex: 1 1 auto` to `.ReactCodeMirror`? – pol Feb 13 '17 at 13:32
It doesn't have any effect – travelboy Feb 13 '17 at 13:48
I looked it up and it seems to be a bug in webkit. Chrome has fixed it, only Safari is left behind. Take a look [here](http://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent) and [here](http://stackoverflow.com/questions/15381172/css-flexbox-child-height-100) . -- Solutions include absolutely positioning the child element, but you can do it by adding display:flex to `.ReactCodeMirror` – pol Feb 13 '17 at 13:49

unkgd · Accepted Answer · 2017-02-13T13:49:05.123

1

First off, something is wrong with the class declaration of CodeMirror, according to your code, it requires the div to contain a subclass of cm-s-robocom, i.e:

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

If you want this css declaration to have either .CodeMirror or .cm-s-robocom, you should use a comma between:

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

What fixed it for me in safari was adding height: 100% to both editorContainer and 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%;}

So the final snippet is - I think you should also add height 100% on the side-bar to make it appear ok:

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>

edited Feb 13 '17 at 13:49

answered Feb 13 '17 at 12:34

unkgd

671
3
12

True... this got messed up when I tried to simplify the code for posting it here and I removed the class only from the HTML but forgot to remove it also from the CSS selector. I fixed that now. But anyways, `height: 100%` on `.CodeMirror` doesn't do the trick. – travelboy Feb 13 '17 at 12:44
Which browser are you testing this on? on chrome everything seems ok, the only different is the padding you set before. – unkgd Feb 13 '17 at 12:45
Safari 10.0.2 on OS X Sierra – travelboy Feb 13 '17 at 12:52
It also appears ok on safari, maybe I'm missing something? the right side fills everything, are you talking about the footer spacing? – unkgd Feb 13 '17 at 13:13
interesting. When I click on "Run code snippet" in my above question, I can reproduce the problem in my Safari. The div inside the blue area (with the text "Should fill...") is only as high as its text, but it should fill the whole light blue area (except for the padding) – travelboy Feb 13 '17 at 13:18
I have edited my answer with something that worked for me on this page – unkgd Feb 13 '17 at 13:28
This doesn't work, and here is why: you set `height: 100%` on `.editorContainer`, however there still is the `navbar` at the top, so if you set `.editorContainer` to 100% height, the whole page gets higher than the browser window (the height of the navbar plus another 100%). – travelboy Feb 13 '17 at 13:36
Edited to something else that worked also, added flex to both ReactCodeMirror and CodeMirror – unkgd Feb 13 '17 at 13:49
That works fine, also in Safari. Unfortunately, making `.CodeMirror` flex breaks the behavior of the CodeMirror widget (which I replaced by just a div to simplify this example). I accepted this answer, because it solves the problem as far as I stated it above. Still fighting with CodeMirror now :( I made a fiddle showing the problems of 3 different approaches: https://jsfiddle.net/25od0qrL/ – travelboy Feb 13 '17 at 17:19

score 0 · Answer 3 · answered Feb 13 '17 at 12:34

0

This should work

div.CodeMirror{height: 100%;}

answered Feb 13 '17 at 12:34

Akshay Kumar

146
8

Div should fill parent height

3 Answers3