Vertical writing mode - text clipping inside a flex container-CodePudding

https://jsfiddle.net/hmudz2ky/1/

<div style="display: flex; border: 1px solid blue;">
 <div id="test" style="border: 1px solid red;">
   <div style="border: 1px solid red; writing-mode: vertical-lr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: 100%;">
        This is very long text that is rotated but should not stretch the blue div
    </div>
 </div>
  <div style="height: 50px; border: 1px solid green;">
      Text
  </div>
</div>

I would like to stop the red div from stretching the blue div vertically. Now if you add a height: 50px; to the div with id=test the text clipping will appear as obviously now the overflow is contained within a fixed height element. I am trying to achieve the same thing but with flex because I want the height of the blue div to be driven purely by the green element and the red element's text should just be clipped. Is this even possible?

This is an example of what I want but without setting the fixed height on the red element: https://jsfiddle.net/hmudz2ky/2/

CodePudding user response：

You could set the element with the text absolute but its parent relative and that parent's parent a two column grid.

The first column gets its width from a hidden character (yes, a bit hacky, on an after pseudo element) and its height from the second grid item.

<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #test::after {
      content: 'T';
      writing-mode: vertical-lr;
      position: relative;
      top: 0;
      left: 0;
      opacity: 0;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div style="display: grid; grid-template-columns: auto 1fr; border: 1px solid blue;">
    <div id="test" style="border: 1px solid red;position: relative; height: 100%;width: fit-content; margin: 0; padding: 0; box-sizing: border-box;">
      <div style="border: 1px solid black; writing-mode: vertical-lr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: 100%;position: absolute; top; 0; left: 0; width: 100%;box-sizing: border-box;">
        This is very long text that is rotated but should not stretch the blue div
      </div>
    </div>
    <div style="height: 50px; border: 1px solid green;">
      Text
    </div>
  </div>
</body>

</html>