1

Jsfiddle: http://jsfiddle.net/techsin/csfvb91u/6/

For example take a layout like this:

<div class="cont">
    <div class="a"></div>
</div>

css

.a {
    background-color: blue;
    height: 100%;


}
.cont {
    min-height: 300px;
    border:1px solid;
}

I'd expect div.a to be the size of .cont which is 300px due to min-height is set as such. However, that's not what i get. .a collapses and completely ignores height 100% UNLESS .cont is explicitly set. Ex: height 300px; no min.

Why Such flawed behavior? i need to understand reasoning.. And how can i overcome it.

Salman A
  • 262,204
  • 82
  • 430
  • 521
Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168
  • @radubogdan that question has nothing to do with this, read this question again – Mr. Alien Dec 01 '14 at 07:19
  • That question has nothing to do, but the answer does. – radubogdan Dec 01 '14 at 07:19
  • the answer there breaks it more in other ways, it says to position inner div absolute. But that means if the content height increases beyond the parent it won't cause parent to increase its height, as child isn't in the flow anymore. So don't consider this to be the answer. – Muhammad Umer Dec 01 '14 at 17:07

1 Answers1

2

You have to use min-height: inherit in .a class

.a {
  background-color: blue;
  min-height: inherit;
   }

Link

Suraj Rawat
  • 3,685
  • 22
  • 33