sticky sidebar flexbox

by heriberto perez

HTML

<body>
	<div class="flex_container">
	  <div class="sidebar">
	  	 This is the fixed child of the flex container 
	  </div>
	  <div class="flex_content">
	  	    an article blah blah blah 
asdfasdf  asdf   asdf  1  an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  asdf asdfasdf  asdf   asdf  1  an article blah blah blah 
asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  2 an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf  an article blah blah blah  asdfasdf  asdf   asdf  3 an article blah blah blah 
asdfasdf  asdf   asdf  1  an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  asdf asdfasdf  asdf   asdf  1  an article blah blah blah 
asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  2 an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf  an article blah blah blah  asdfasdf  asdf   asdf  3 an article blah blah blah 
asdfasdf  asdf   asdf  1  an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  asdf asdfasdf  asdf   asdf  1  an article blah blah blah 
asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  2 an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf  an article blah blah blah  asdfasdf  asdf   asdf  3 an article blah blah blah 
asdfasdf  asdf   asdf  1  an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  asdf asdfasdf  asdf   asdf  1  an article blah blah blah 
asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf...

CSS

.flex_container {
  display: flex;  
}

.sidebar {
  flex: 1;
  height: 500px;
  background: yellow;
}

.flex_content {
  flex: 4;
   height: 500px;
  overflow-x: auto;
}