Html 语义UI网格列高度

我正在构建一个简单的基于网格的布局，我想将

垂直指向菜单

放置在第三个紫色行中，如图所示。使第三行的高度占据视口100%的正确方法是什么？我试着将主体和菜单高度设置为100%，但没有成功。该行的高度由内容的高度决定，在本例中是菜单的高度。

以下代码片段（和JSFIDLE）取自页面，其中相同的问题由相同的用户提出：

<style>
    html, body {
        height: 100%;
    }

    .ui.grid {
        height: 100%;
    }
</style>

<div class="ui padded equal height grid">
  <div class="two wide purple column">
  </div>
  <div class="fourteen wide stretched column">
    <div class="ui equal height grid">
      <div class="sixteen wide red column"></div>
      <div class="eight wide orange column"></div>
      <div class="eight wide blue column"></div>
    </div>
  </div>
</div>

html，正文{
身高：100%；
}
.ui.grid{
身高：100%；
}

---

@Jan感谢您的回答，但是如何使左窗格可滚动，

overflow-x:auto

似乎不起作用。