Css 使两列分别可滚动，并显示视口剩余长度的高度

我有一把JS小提琴，正是我想要的：

它由两列组成，分别可滚动，左列的不同部分可以通过javascript轻松滚动，而不会影响右列或页面的其余部分

然而，对于这个例子，我唯一的方法是使用两个导航的px来硬编码高度

高度：计算（100vh-90px）

当然，这可能不适用于不同的浏览器、设备和分辨率

如果添加了任何元素或导航系统的大小发生变化，它将中断

我真正想要的是#表单自动调整大小，以填充视口的剩余部分

在我当前的示例中，如果我添加了另一个元素，如警报，#content and#sidebar将比视口长，并且在#content div滚动后整个页面滚动时，我会感到跳跃

警报和跳跃滚动的示例：

我发现了这个JSFIDLE，它似乎解释了我想要使用flexbox的原因：

然而，我尝试用flexbox实现这一点也没有成功。我能让“内容”和“指南”分别滚动的唯一方法是，我给它们一个固定的高度，然后回到如何使这些div占容器div的100%的第一步

下面是我使用flexbox失败的尝试（在本例中，它的固定高度为100px）：

有没有可能在不使用px定义固定高度的情况下让第一个和第二个JS小提琴工作

占据视口剩余高度的元素的所有父元素都需要具有
100%
高度。在引导中，使用
h-100

这些元素的最近父元素必须是
flex
，并且必须具有
flex-direction:column
。在引导中，使用
d-flex
和
flex列
。一些
类
如
行
已经是
flex
，因此不要使用
d-flex

使用
flex-grow-1
作为具有剩余高度的元件。同样，一些
类
如
col
具有
flex-grow:1

引导flex类

html，
身体{
身高：100%；
}

我现在又在玩这个了，想弄明白。我注意到您的第三个示例有一个奇怪的问题，您可以向右滚动，因为页面上有一个偏移量，我认为第一行需要“无水槽”。当我找到更具体的地方时，我会更新它。我使用#main上的绝对位置来偏移边栏和导航栏。虽然我不确定这是否是最好的方法：我想看看你的解决方案，你还没有发布来比较。好吧，我想我已经解决了，只使用填充而不是边距（我想我需要再次阅读框大小），正如我所说的，我仍然有兴趣看到你没有发布的解决方案。不应更改图元的位置。如果这样做，元素将从正常的内容流中删除。然后需要使用边距和填充将相邻元素定位到正确的位置。我刚刚写了这个。我无法访问前几天编写的解决方案。我会经历的。如果它比这个好，我将在下周发布——在假期之后@当您可以使用网格或固定定位时，外部布局（导航栏和侧栏）是否有理由使用flex？