How to make rotated elements in a flexbox fixed to the right side of a page?

Question

I would like to create a small vertical text \"watermark\" background that runs up the right side of some reveal.js slides. I have gotten as far as the fact that I need to u

Answer 1

I you don't want the width of the text to affect the width of the outer, then use a writing-mode vertical for it.

For the image, it would be better to have an image that doesn't need to be rotated. But, if this is the case, use transform translate and transform origin, just like in Temani Afif answer

div.outer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  background: grey;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
}

.item {
  writing-mode: vertical-rl;
  background: red;
}

img.item {
  transform: rotate(90deg) translateX(-100%);
  transform-origin: left bottom;
  margin-right: -100px;
}

  

    Some text