为何旋转HTML后div出现垂直滚动？求自适应布局解决方案

• 对<html>元素应用transform: rotate(-90deg)后，页面出现了非预期的垂直滚动条，不符合需求
• 浏览器未处于全屏状态时，希望内容能自动在垂直方向收缩以适配文本高度，但给.wrapper设置height: inherit;后仍无法实现该效果
• 补充：之前@Brett Donald给出的方案仅适用于内容较少的小div，对内容较多的大div无效

<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      transform: rotate(-90deg);
    }
    
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div>
      <p>hello how are you</p>
      <p>hello whatever here</p>
      <p>hello testing this</p>
    </div>
  </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者electronixG