Css 可滚动flexbox div元素中的垂直分隔线_Css_Html_Overflow_Flexbox

Css 可滚动flexbox div元素中的垂直分隔线

css html

Css 可滚动flexbox div元素中的垂直分隔线,css,html,overflow,flexbox,Css,Html,Overflow,Flexbox,我有一个垂直中心可调整的可滚动flexbox元素，它本身应该有两列（我用两个子div解决了这个问题）。中央flexbox应具有框架和中央分隔线我无法让中央分隔线一直延伸到可滚动flexbox的底部。我尝试使用第三个子div元素，但该行仅显示在flexbox的垂直范围内如何在一个可滚动的flexbox中创建两列，其中一个框架和中心分隔线一直延伸到底部谢谢你的帮助以下是一个例子：尝试这种混合flexbox和CSS表格布局。您可以将内容区域设置为表格，将三列设置为表格单元格，使它们的高度始

我有一个垂直中心可调整的可滚动flexbox元素，它本身应该有两列（我用两个子div解决了这个问题）。中央flexbox应具有框架和中央分隔线

我无法让中央分隔线一直延伸到可滚动flexbox的底部。我尝试使用第三个子div元素，但该行仅显示在flexbox的垂直范围内

如何在一个可滚动的flexbox中创建两列，其中一个框架和中心分隔线一直延伸到底部

谢谢你的帮助

以下是一个例子：

尝试这种混合flexbox和CSS表格布局。您可以将内容区域设置为表格，将三列设置为表格单元格，使它们的高度始终相等

有一个问题是，如果内容比容器高，它只能正常工作，否则垂直线会停在中间。请参阅底部的另一种方法

html，
身体{
身高：100%；
保证金：0；
}
.包装纸{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.内容{
弹性：1；
溢出y：自动；
最小高度：100px；
边框：1px实心；
}
.包装内容{
显示：表格；
宽度：100%；
}
.wrapContent>div{
显示：表格单元格；
}
.leftContent，
.rightContent{
宽度：50%；
}
.分隔器{
左边框：1px实心；
}


标题
左边
赖特
页脚

非常感谢您的帮助。表的问题在于，当表的内容小于flexbox时，它们不会填充flexbox的垂直范围。看：中间到底是什么？它总是一条很细的垂直线吗？是的，它应该是两列内容之间的垂直分隔线。我知道的唯一方法是使用背景图像作为中间线，上面进行了更新，希望能有所帮助。

<body>
  <div class="wrapper">
    <div class="header">
      <h1>Header</h1>
    </div>

    <div class="content">

      <div class="leftContent"> Column 1
        With a lot of lines.
      </div>

      <div class="divider"></div>

      <div class="rightContent"> Column 2
        With fewer lines
      </div>
    </div>

    <div class="footer">
      Footer
    </div>
  </div>
</body>

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: black;
  color: red;
}

.wrapper {
  display: flex;
  /* use the flex model */
  height: 100%;
  flex-direction: column;
}

.header {
  margin: 1em 1em 0 1em;
}

.content {
  flex: 1 1 auto;
  display: flex;
  overflow-y: auto;
  position: relative;
  min-height: 100px;
  margin: 0 1em 0 1em;
  border: 6px double red;
}

.content > div {
  width: 50%;
  padding: 3%;
}

.content > div:first-child {
  margin-right: 10px;
}

.footer {
  margin: 0 1em 1em 1em;
}

.divider {
  position: absolute;
  left: 50%;
  top: 0%;
  bottom: 0%;
  border-left: 6px double red;
}