HTML containment overflow (1d)

html-containment-overflow-1d.markdown

HTML containment overflow (1d)

A Pen by Ethereum on CodePen.

License.

index.haml

<h1>HTML containment & overflow</h1>
<p>
  There should be a fixed-position arrow
  in the top right,
  and it should stay in the top right, 
  attached to the viewport
  as you scroll down to see the rainbow.
  But no browser allows it.
  <a href="https://github.com/w3c/csswg-drafts/issues/9003">I believe that's a bug.</a>
</p>

<div class="fixed">⬇️</div>
<div class="spacer"></div>

style.css

html {
  container-type: inline-size;
}

@layer setup {
  html {
    font-size: calc(1.5em + 1vw);
  }
  
  .fixed {
    position: fixed;
    top: 1em;
    right: 1em;
    padding: 1em;
    background: hsl(0deg 0% 50% / 0.5);
    border: thick double white;
  }

  .spacer {
    height: 300vh;
    background: linear-gradient(
      to bottom,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
    padding: 1em;
    text-align: center;
  }
}