HTML containment overflow (1d)

html-containment-overflow-1d.markdown

HTML containment overflow (1d)

A Pen by Ethereum on CodePen.

License.

index.markdown

HTML containment & overflow

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. I believe that's a bug.

⬇️

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;
  }
}