使用CSS将div固定在容器的左侧，将容器的整个高度（但不是页面的全高度）固定

Question

我想要页面中的以下布局：

页眉和页脚始终可见。 灰色区域是article标签。 绿色和深红色区域均位于nav标签内。 深红色具有固定的宽度，将用作调整绿色导航面板大小的句柄（当然，它会非常狭窄，我将使用JavaScript进行大小调整）。 灰色和绿色区域都必须具有自己的滚动条。

那就是HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>CSS template</title>
</head>
<body>
<header>Header</header>
<main>
<nav>
    <div class='navcont'>
        <p>nav1</p>
        <p>nav2 with longer line just to make sure if everything is working as intended</p>
    </div>
    <div class='handle'>Handle</div>
</nav>
<article>
    <p>Article</p>
</article>
</main>
<footer>Footer</footer>
</body>
</html>

那就是CSS：

html, body {
    height:100%;
    margin:0;
}
body {
    display:flex;
    flex-direction:column;
}
header {
    text-align:center;
}
main {
    flex:1;
    display:flex;
    min-height:0;
}
article {
    background:#C0C0C0;
    width:80%;
    overflow:auto;
    padding:10px;
}
nav {
    width:20%;
    height:auto;
    overflow:hidden;
}
.navcont {
    background:#00FF00;
    width:auto;
}
.handle {
    background:#800000;
    float:right;
    width:30px;
}
footer {
    text-align:center;
}

还有一个运行示例： https : //jsfiddle.net/etwphhc8/

我从这里的许多不同问题/答案中尝试了许多不同的解决方案，但仍然无法按预期工作。 那么，如何使用CSS实现所需的布局？

Answer 1

在导航栏中添加flex并将方向设置为行：

nav {
  width:20%;
  height:auto;
  overflow:hidden;
  display:flex;
}

Answer 2

尝试写：

  .navcont {
      background:#00FF00;
      width:auto;
      height: 100%;
}