可滚动的flexbox中的多种背景颜色 [英] Multiple background colors in scrollable flexbox

问题描述

我有一个 flexbox （ flex-direction：row ），内容为2列，高度固定。我想要左右栏分别有红色和蓝色的背景。如果其中任何一列溢出，则会出现 flexbox 的滚动条（溢出的部分仍为红色/蓝色）。如果列的内容高度小于 flexbox 的高度，则下面的空间应该仍然是红色/蓝色。

<演示（我希望灰色的部分是蓝色的）：

不使用渐变颜色或JavaScript，我怎么能达到这个效果？ data-hide =falsedata-bar =false>

 ＃c1 {background-color：grey;显示：flex; height：200px;溢出-y：auto; align-items：baseline;}＃left {flex：1; background-color：red;}＃right {flex：1; < div id = html-print-color = C1 > < div id =left> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < / DIV> < div id =right> < DIV>线474; / DIV> < / div>< / div>  






编辑

不工作的方法：

• 设置 align-items：stretch ：溢出的部分将是灰色的


• 添加位置：绝对 div 覆盖 flexbox ，仅用于背景：this div 如果滚动条可见，宽度将会有错误。
从Nithin Charly的回答中，我得到了这样的结论：



（由于bug，在IE中不能正常工作）


 ＃c1 {background-color：grey; height：200px; overflow-y：auto;}＃wrap {display：flex;最小高度：100％; align-items：stretch;}＃left {flex：1; background-color：red;}＃right {flex：1; < div id = html-print-color = C1 > < div id =wrap> < div id =left> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < DIV>线474; / DIV> < / DIV> < div id =right> < DIV>线474; / DIV> < / DIV> < / div>< / div>  

I have a flexbox (flex-direction: row) with 2 columns of content and a fixed height. I want the left and right column to have a red and blue background respectively. If either of the columns overflow, the flexbox's scrollbar appears (the overflowed part is still red/blue). If a column's content height is less than the flexbox's height, the space below should still be red/blue.

Without using gradient colors or javascript, how can I achieve this effect?

Demo (I want the gray part to be blue):

#c1 {
  background-color: gray;
  display: flex;
  height: 200px;
  overflow-y: auto;
  align-items: baseline;
}
#left {
  flex: 1;
  background-color: red;
}
#right {
  flex: 1;
  background-color: blue;
}

<div id="c1">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
</div>

---

EDIT

Methods that don't work:

• Setting align-items: stretch: overflowed part will be gray
• Add a position: absolute div that overlays the flexbox, solely for the background: this div will have the wrong width if the scrollbar is visible.

解决方案

Working from Nithin Charly's answer, I got this:

(doesn't work properly in IE due to bugs)

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
}

#wrap {
  display: flex;
  min-height: 100%;
  align-items: stretch;
}

#left {
  flex: 1;
  background-color: red;
}

#right {
  flex: 1;
  background-color: blue;
}

<div id="c1">
  <div id="wrap">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
  </div>
</div>

这篇关于可滚动的flexbox中的多种背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！