如果容器也具有以百分比表示的最小高度，则以百分比表示的CSS最小高度将不起作用

Question

I have a simple markup here:

<div class="fixh">

    <div class="outer">
        <div class="inner">
            inner
        </div>

    </div>

</div>

I want to make inner block to have at least 100% height of outer block. If content is bigger than 100%, it should overflow. But inner block with min-height:100% won't work! Example: http://jsfiddle.net/mBBJM/5378/

Answer 1

min-height doesn't actually work as well with percentages. What would fix this is just using height:100% here:

 .fixh { width: 300px; height: 300px; background-color: green; } .outer { width: 100%; height: 100%; min-height: 100%; background-color: blue; } .inner { width: 100%; height: 100%; min-height: 100%; background-color: gray; } 

 <div class="fixh"> <div class="outer"> <div class="inner"> inner </div> </div> </div> 

You should always specify the height and width styles when using the min-height or min-width styles, respectively (or max-height and max-width for that matter). Otherwise the CSS doesn't know it needs to change, so it won't.

Answer 2

I hope this is what you asked.

http://jsfiddle.net/w9Lghbuw/1/

.fixh {
    width: 300px;
    height: 300px;
    background-color: green;
}
.outer {
    width: 100%;
    min-height: 100%;
    background-color: blue;
    height: 100%;
}
.inner {
    color:#fff;
    width: 100%;
    height: 100%;
    line-height: 20px;
    word-break: break-all;
    overflow: auto;
}