css how to make columns auto fill background color to height 100%

Question

I have the following code:

#left {
  float: left;
  width: 180px;
  background-color: #ff0000;
}

#right {
  overflow: hidden;
  background-color: #00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right<br/> down
  </div>
</div>

What I am trying to achieve is to make the left column's background-color to fill the whole div. This should be the case regardless of the height of the #right column.

so far I have tried/added

display: flex;
height: 100%
flex 1;

To the #left style but it is not working.

This has to be a CSS only solution.

Vadim Ovchinnikov · Accepted Answer · 2017-07-24T08:16:45.813

You can use flexbox here. Demo:

.container {
  /* become a flex-container */
  /* flex-items will be stretched vertically by default */
  display: flex;
}

#left {
  width: 180px;
  background-color: #ff0000;
}

#right {
  /* occupy remaining width */
  flex: 1;
  background-color: #00FF00;
}

<div class="container">
  <div id="left">
    left
  </div>
  <div id="right">
    right
    <br/> down
  </div>
</div>

Also you can use CSS Grid layout here. Demo:

.container {
  /* become a grid-container */
  display: -ms-grid;
  display: grid;
  
  /* first column should occupy 180px and second should occupy remaining width */
  -ms-grid-columns: 180px 1fr;
  grid-template-columns: 180px 1fr;
}

#left {
  background-color: #ff0000;
}

#right {
  background-color: #00FF00;
  
  /* specify column for IE/Edge explicitly */
  -ms-grid-column: 2;
}

<div class="container">
  <div id="left">
    left
  </div>
  <div id="right">
    right
    <br/> down
  </div>
</div>

@gilesrpa Consider upvoting if it helped you:) – Vadim Ovchinnikov Jul 24 '17 at 08:34 — Vadim Ovchinnikov, Jul 24 '17 at 08:34

score 1 · Answer 2 · answered Jul 24 '17 at 08:32

1

Need to understand why #left doesn't takes height of 100% and that's because you have used float:left property in #left. So whenever float left is used on an element it by default changes it display to inline-block and that's the reason that you have to change display of your parent div to overcome this.

Here is below using flex,

div{
  display:flex;
}
div #left {
  width: 180px;
  background-color: #ff0000;
}

div #right {
  flex:1;
  overflow: hidden;
  background-color: #00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right<br/> down
  </div>
</div>

Read this to understand how float works.

answered Jul 24 '17 at 08:32

frnt

8,455
2
22
25

How does it differ from my answer? – Vadim Ovchinnikov Jul 24 '17 at 08:33
@VadimOvchinnikov Both ways are added i.e. using table and flex. And OP asked for flex. But I need others to understand why it didn't work i.e. height 100%. I need to add a flex code, it's same you have added a class I have used div. Just for that float point I need to add this code. – frnt Jul 24 '17 at 08:37

score 0 · Answer 3 · edited Jul 24 '17 at 08:05

0

.main-table {
  display: table;
}

#left {
  display: table-cell;
  float: none;
  width: 180px;
  background-color: #ff0000;
}

#right {
  display: table-cell;
  overflow: hidden;
  background-color: #00FF00;
}

<div class="main-table">
  <div id="left">
    left
  </div>
  <div id="right">
    right<br/> down
  </div>
</div>

Something like table may help you in this case!!

edited Jul 24 '17 at 08:05

Vadim Ovchinnikov

13,327
5
62
90

answered Jul 24 '17 at 08:01

Lalit Sachdeva

6,469
2
19
25

css how to make columns auto fill background color to height 100%

3 Answers3