Multiple Background Colors In Scrollable Flexbox

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 t

Solution 1:

When you fix height for parent and using display flex, the height of children is auto fit to height parent. So in this case, you need to use js to change the height of children. If you don't want to use js, you just do as bellow:

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
  
}
#left {
  background-color: red;
}
#right {
  background-color: blue;
}
#left, #right{
  display:table-cell;
  width:200px;
}

<divid="c1"><divid="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><divid="right"><div>line</div></div></div>

Solution 2:

I think it would be easier to use display: table; for your container, and display: table-cell; for your columns. The elements acting like tables, you can obtain the rendering you want.

I had to add another container thought, due to the fact that you cannot limit the height of a table so easily.

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

.table {
  display: table;
  width: 100%;
}

#left {
  background-color: red;
}
#right {
  background-color: blue;
}

#left, #right {
  display: table-cell;
  width: 50%;
}

<divid="c1"><divclass="table"><divid="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><divid="right"><div>line</div></div></div></div>

Solution 3:

Wrap left and right div with another div, set display flex and min-height:min-content for that div. also set height 100% for left and right div.

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

#wrap{
  display:flex;
  width:100%;
  min-height:min-content;
}
#left {
  flex: 1;
  background-color: red;
  height:100%;
}
#right {
  flex: 1;
  background-color: blue;
  height:100%;
}

<divid="c1"><divid='wrap'><divid="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><divid="right"><div>line</div></div></div></div>

Solution 4:

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;
}

<divid="c1"><divid="wrap"><divid="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><divid="right"><div>line</div></div></div></div>

Solution 5:

The problem is with align-items: baseline. You can just leave that out or replace it with stretch and you'll get what you're after.

#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;
}

<divid="c1"><divid="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><divid="right"><div>line</div></div></div>