Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/position-sticky-crash.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<style>
.container {
min-width: 30px;
container-type: inline-size;
}
.scroller {
overflow: scroll;
width: 100px;
height: 100px;
}
@container (width = 100px) {
.scroller { display: none; }
}
.float {
background: cyan;
float: left;
}
</style>
<div style="display: flow-root; width: 100px;">
<!-- The floats create a situation where it needs to perform layout twice, first with 50px, then 100px. -->
<div class="float" style="width: 50px; height: 50px;"></div>
<div class="float" style="width: 100px; height: 50px;"></div>
<div class="container">
<div class="scroller">
<div style="position: sticky; top: 0;"></div>
</div>
</div>
</div>