blob: b8da34d4cdc6c6c4eacba2bb61c828dc94c594fb [file] [log] [blame]
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#container {
width: 100%;
height: 300px;
overflow: visible;
-webkit-flow-into: flow;
}
#content {
width: 30%;
height: 400px;
border: thick solid green;
font-size: 15px;
overflow: scroll;
}
.region {
width: 600px;
height: 100px;
-webkit-flow-from: flow;
overflow: visible;
}
</style>
</head>
<body>
<p>The scrollable element below should look like it's not fragmented. The green border should be continous. The content should fit the scrollable area.</p>
<div class="region"></div>
<div style="width: 400px;" class="region"></div>
<div class="region"></div>
<div id="container">
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</body>
</html>