Why doesn't height: 100% work for nested elements in Chrome?

A

Alexander Lozovsky2017-03-13 00:05:01

css

Alexander Lozovsky, 2017-03-13 00:05:01

HTML code:

<body>
      <header>
      <!-- всяко-разно -->
      </header>
      <main>
         <div class="main_wrap">
            <div class="main_row">
    <!-- много чего -->
            </div>
         </div>
      </main>
      <footer>
      <!-- копирайт и т.д. -->
      </footer>
   </body>

Next, less file with styles:

body{
   display: flex;
   flex-direction: column;
   height: 100vh;
}
header{
   flex-shrink: 0;
}
main{
   flex: 1 0 auto;
   .main_wrap{
      height: 100%;
      .main_row{
         height: 100%;
       }
    }
}
footer{
   flex-shrink: 0;
}

I pressed the footer with the help of flexboxes, everything worked clearly, only in Chrome nested el-you do not want to stretch after main. The problem is with main_wrap and main_row , in Mozilla and IE11 (!!!) they are (as intended) the same height as main, but in Chrome by content (in the case of min-height the same). What's a glitch?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Eugene, 2017-03-13
@deadsandro

add height to main too: 100%
percentage height only works for blocks that have an explicit height.

A

Alexander Lozovsky, 2017-03-17
@lazo77

In general, DeaDSandro is right, I did for main flex: 1 0 80%; and everything worked as expected.
The question, however, was not in this, I wanted to know why the solution described initially did not work only in Chrome ?!