Bootstrap 4 使引导4列中的嵌套内容可滚动

我希望嵌套内容（列内）可以滚动，而不需要整个窗口可以滚动

下面的示例几乎可以工作，但整个内容不适合100%的视口高度，因此右侧会出现一个滚动条，这很糟糕

CSS部分：

    #leftCol {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    #subcontent {
      flex: 1 1 auto;
      overflow-y: auto;
      min-height: 0px;
    }

body {
  margin: 0;
}

.page {
  height: 100vh;
  
  display: flex;
  flex-direction: column;
  
  &__header {
    height: 90px;
    background-color: #333;
    color: white;
  }
  
  &__content {
    flex: 1;
    overflow: hidden;
  }
}

.columns {
  height: 100%;
  
  display: flex;
  
  &__item {
    flex: 1;
  }
}

.sub-content {
  height: 100%;
  
  display: flex;
  flex-direction: column;
  
  &__header {
    height: 70px;
    background-color: skyblue;
  }
  
  &__text {
    flex: 1;
    overflow: auto;
  }
}

100vh听起来不正确，但：

• 如果我没有将高度设置为定义的值，可滚动的子项将不会滚动
• header和subheader的高度未知，因此我无法在左列设置固定值高度

---

谢谢你的帮助

有人在Reddit上帮了我。这是它的解决方案，它与引导也很好地配合使用：

以下是SCSS部分：

    #leftCol {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    #subcontent {
      flex: 1 1 auto;
      overflow-y: auto;
      min-height: 0px;
    }

body {
  margin: 0;
}

.page {
  height: 100vh;
  
  display: flex;
  flex-direction: column;
  
  &__header {
    height: 90px;
    background-color: #333;
    color: white;
  }
  
  &__content {
    flex: 1;
    overflow: hidden;
  }
}

.columns {
  height: 100%;
  
  display: flex;
  
  &__item {
    flex: 1;
  }
}

.sub-content {
  height: 100%;
  
  display: flex;
  flex-direction: column;
  
  &__header {
    height: 70px;
    background-color: skyblue;
  }
  
  &__text {
    flex: 1;
    overflow: auto;
  }
}

---

这个问题比我最初想象的更难解决。但现在它工作了：）

这是一个需要解决的有趣问题（我确信@bdavidxyz也发现了这一点）。我有时间玩，我想看看我是否可以使用Bootstrap-4类获得效果

您最初的示例显示的内容靠近左侧和右侧，但是在一个大屏幕上，这看起来很奇怪，因此我使用引导容器将内容的最大宽度限制为1140px（容器和容器流体版本都在下面）

因为列的排列方式，我不认为有办法为小屏幕重新组织屏幕，所以我将主体宽度限制为至少480px

所载版本：

可变高度收割台-包含版本
副标题
知识是一种美德，是一种美德，是一种美德，是一种美德

可滚动分包
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护

在非故意的情况下，除了在铜酸盐中的腐败行为外，其他的腐败行为和犯罪行为都会导致暴力行为，同样的罪过也会导致对动物、劳动和精神的伤害。这是一个很好的例子。暂时的自由，以及解决方案，是一种无障碍的选择，它可以在有能力的情况下最大限度地满足需求，也可以在无障碍的情况下满足需求。在不复发的疾病和疾病中，因疾病或疾病而导致的必要性的暂时性死亡和官方死亡。它是一种智商缺失的动物，但它是一种被称为意识或行为的动物

右栏
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

绝妙的解决方案，没有外部CSS和极简内联风格。谢谢