Fill height of a div over 100%

Question

I'm trying this code:

The HTML:


  
  I'm left
  

  
  I'm right

The CSS:

html,body,#cnt{
  height:100%;
}
#left {
  background: #990000;
  float: left;
  width: 100px;
  height: 100%;
}

#right {
  margine-left: 100px;
  background: #009900;
}

The question: How do I make left DIV to stretch in height as the right DIV stretches?

Consider the s as dynamic content, that may grow, for example.

Thanks

Michael Coker · Accepted Answer

You can use flex on the parent, then flex-grow: 1 on the right side so it fills the available space. By default, the left/right columns in this flex row will be the same height.

(btw, you misspelled margin-right on #right)

body {margin:0;}
#cnt {
  /* use min-height if you want the content to be at least the window height;
  /* min-height: 100vh; */
  display: flex;
}
#cnt {
  display: flex;
}
#left {
  background: #990000;
}

#right {
  flex-grow: 1;
  background: #009900;
}


  
  I'm left
  

  
  I'm right

Fill height of a div over 100%

Answers (1)

Related Questions