即使使用 flexbox 和明确的最大高度，div 也会超出这些限制

Question

我对 HTML 和 CSS 有一些我不理解的行为，我希望有人能解释一下：https://jsfiddle.net/kufd2x96/1/:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #fixedDiv{
            position: fixed;
            top: 32px;
            left: 0px;
            height: calc(100vw - 32px);
            background-color: blue;
            display: flex;
            flex-direction: column;
          }
          #bigSomething{
            overflow-y: auto;
            background-color: green;
            flex-grow: 1;
          }
        </style>
      </head>
      <body style="display: flex; justify-content: center;">
        <div id="fixedDiv">
          <div>
            Small Something
          </div>
          <div id="bigSomething">
            Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
              Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
                Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
          </div>
        </div>  
      </body>
    </html>

我期望发生什么以及为什么：

在这个 MCVE 中，由于 #fixedDiv 被设置为具有将其精确带到页面底部的高度，因为 flexbox（我想，我看到了一些声称如此多的 SO 答案）保证了内部元素的增长不会超过它们的容器，并且由于 #bigSometing overflow-y: auto; 我希望所有内容都保留在屏幕上并且 #bigContent 获得滚动条以便可以访问所有内容。

实际发生了什么：

相反，#bigContent 会增长到远远超出屏幕底部，但会增长到一个看似随机的高度，因为它没有增长到足以包含其全部内容的程度（从功能滚动条这一事实可以推断出这一点）存在）。

问题：

#bigContent 的区域完全在屏幕上并且有滚动条，为什么这段代码没有按我预期的方式运行，我该如何解决？

Answer 1

我发现了问题：我应该有vh的时候有vw，所以计算是基于页面的宽度，就好像宽度就是高度。

即使使用 flexbox 和明确的最大高度，div 也会超出这些限制

Even with flexbox and explicit maximum height, div grows beyond these limits

html

css

overflow

flexbox