RmlUi - overflow.rml

<rml>
    <head>
        <title>Overflow Test</title>
        <style>
            body {
                font-family: vo-default;
            }

            .background {
                display: block;
                background: red;
                padding: 15px;
                width: 300px;
                height: 150px;
            }

            .content {
                display: block;
                border: 5px black;
                background: green;
                height: 93%;
            }

            scrollbarvertical {
                width: 10px;
                background: blue;
            }

            sliderbar {
                background: gray;
            }

        </style>

    </head>

    <body>
        <div class="background" style="position: absolute; top: 250px; left: 100px">
            <div class="content" style="overflow: visible;">
                Visible<br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et ullamcorper ligula, sit amet euismod enim. Suspendisse fermentum pretium nisi vitae molestie. Fusce vitae fringilla nibh, et fermentum arcu. Nam in interdum ex. Vestibulum vitae nisl nunc. Vestibulum varius imperdiet elit, vitae fringilla arcu luctus quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eleifend posuere vulputate. In et velit a nulla maximus rhoncus. Donec libero dui, facilisis ut lectus at, porttitor molestie sem. Donec mollis turpis elit, et placerat mauris suscipit non.
                <br/><br/>
                Praesent dictum molestie metus et convallis. Morbi vitae ipsum ornare, consequat lectus at, faucibus velit. Nullam sit amet congue diam. Cras nec faucibus ligula. Nullam scelerisque feugiat semper.
            </div>
        </div>
        <div class="background" style="position: absolute; top: 250px; left: 500px">
            <div class="content" style="overflow: hidden;">
                Hidden<br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et ullamcorper ligula, sit amet euismod enim. Suspendisse fermentum pretium nisi vitae molestie. Fusce vitae fringilla nibh, et fermentum arcu. Nam in interdum ex. Vestibulum vitae nisl nunc. Vestibulum varius imperdiet elit, vitae fringilla arcu luctus quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eleifend posuere vulputate. In et velit a nulla maximus rhoncus. Donec libero dui, facilisis ut lectus at, porttitor molestie sem. Donec mollis turpis elit, et placerat mauris suscipit non.
                <br/><br/>
                Praesent dictum molestie metus et convallis. Morbi vitae ipsum ornare, consequat lectus at, faucibus velit. Nullam sit amet congue diam. Cras nec faucibus ligula. Nullam scelerisque feugiat semper.
            </div>
        </div>
        <div class="background" style="position: absolute; top: 650px; left: 100px">
            <div class="content" style="overflow: auto;">
                Auto<br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et ullamcorper ligula, sit amet euismod enim. Suspendisse fermentum pretium nisi vitae molestie. Fusce vitae fringilla nibh, et fermentum arcu. Nam in interdum ex. Vestibulum vitae nisl nunc. Vestibulum varius imperdiet elit, vitae fringilla arcu luctus quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eleifend posuere vulputate. In et velit a nulla maximus rhoncus. Donec libero dui, facilisis ut lectus at, porttitor molestie sem. Donec mollis turpis elit, et placerat mauris suscipit non.
                <br/><br/>
                Praesent dictum molestie metus et convallis. Morbi vitae ipsum ornare, consequat lectus at, faucibus velit. Nullam sit amet congue diam. Cras nec faucibus ligula. Nullam scelerisque feugiat semper.
            </div>
        </div>
        <div class="background" style="position: absolute; top: 650px; left: 500px">
            <div class="content" style="overflow: scroll;">
                Scroll<br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et ullamcorper ligula, sit amet euismod enim. Suspendisse fermentum pretium nisi vitae molestie. Fusce vitae fringilla nibh, et fermentum arcu. Nam in interdum ex. Vestibulum vitae nisl nunc. Vestibulum varius imperdiet elit, vitae fringilla arcu luctus quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eleifend posuere vulputate. In et velit a nulla maximus rhoncus. Donec libero dui, facilisis ut lectus at, porttitor molestie sem. Donec mollis turpis elit, et placerat mauris suscipit non.
                <br/><br/>
                Praesent dictum molestie metus et convallis. Morbi vitae ipsum ornare, consequat lectus at, faucibus velit. Nullam sit amet congue diam. Cras nec faucibus ligula. Nullam scelerisque feugiat semper.
            </div>
        </div>
    </body>
</rml>