Skip to content

Fixed height and overflowing content causes weird behavior

Fixed height and overflowing content causes weird behavior:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed-height-overflow.html</title>
    <style>
        @page {
            size: 220pt 220pt;
            margin: 10pt;
        }
        html {
            font-size: 10pt;
            line-height: 10pt;
            background: lightgrey;
        }

        #box {
            width: 100pt;
            height: 100pt;
            background: maroon;
        }

        #child-1 {
            width: 60pt;
            height: 60pt;
            background: yellowgreen;
        }

        #child-2 {
            width: 60pt;
            height: 60pt;
            background: darkorange;
        }

    </style>
</head>
<body>
    <div>
        <div id="box">
            <div id="child-1">1</div>
            <div id="child-2">2</div>
        </div>
    </div>
</body>
</html>
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information