CODEWITHSUNDEEP
htmlcsslayoutcss-tables
busticated
busticated

Reputation: 2187

Text length + table-cell + percentage height - what is going on here?

I have a div using display: table-cell which contains a child div... both use percentage-based dimensions. When that child div contains more than a certain amount of text (depending on font-size), it ignores its height rule.

Here's an isolated test-case

Clicking the "toggle text" button will demonstrate the issue. Its more pronounced in Chrome & Safari but Firefox also exhibits the issue.

I would expect the .child div's height to be 40px... but instead it is roughly 290px (in Chrome & Safari). Likewise, .table should have a height of 240px.

HTML:

<div class="main">
    <div class="item">
        <div class="table">
            <div class="table-cell">
                <div class="child">
                    <div class="child-inner">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main {
    position: relative;
    margin: 20px;
    width: 320px;
    height: 480px;
}

.item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #eee;
    overflow: hidden;
}

.table {
    display: table;
    position: absolute;
    top: 2.083333333333333%;
    left: 50%;
    height: 50%;
    width: 50%;
}

.table-cell {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.child {
    position: relative;
    overflow: hidden;
    left: 0%;
    height: 16.666666666%;
    width: 93.75%;
    background-color: rgba(255, 255, 255, 0.5);
}

.child-inner {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
}

p {
    margin: 0;
    padding: 0;
}

Upvotes: 5

Views: 674

Answers (2)

cwardzala
cwardzala

Reputation: 21

It appears the padding on .child-inner is having adverse affects. I removed the padding and it now respects the height. http://jsfiddle.net/cwardzala/Z27S9/1/

.child-inner {
    height: 100%;
    width: 100%;
    /* padding: 10px; */
    overflow: hidden;
    overflow-y: auto;
}

Upvotes: 1

Frank Schwieterman
Frank Schwieterman

Reputation: 24480

I tried wrapping the growing element in a div that is using absolute positioning, it seemed to have the effect you're asking for: http://jsfiddle.net/fschwiet/2RgPV/. See the "fixme" div that was added. The idea is that the fixme div kind of seals whatever is happening within it from whatever table logic lives outside.

.fixme {
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    overflow:hidden;
}

Upvotes: 1

Related Questions