Scrolling only content div, others should be fixed

Question

I have three divs. I need header and left_side divs to be fixed and content div to scroll. I\'ve been searching for solution and found something with overflow and <

Answer 1

As an learning exercise, I decided to update the answer by using CSS3 Flexbox. I also tried to more closely match the layout that jstorm31 was attempting to create.

Ritabrata's answer is the correct one: If you want a specific element to have scroll bars, you need to set its height (and/or width) to a fixed size and overflow to auto.

Code also to be found here: Plunker

style.css

#header{
    overflow: hidden; 
    background-color: #880016; 
    height: 50px;
    border-bottom: 4px solid black;
    padding: 10px;
    font-size: 20px;
}
#side_and_content {
    display: flex;
}
#left_side{
    flex: 1;
    overflow:hidden; 
    background-color: #ED1B24;  
    height: 200px;
    border-right: 2px solid black;
    padding: 10px;
}
#content{
    flex: 5;
    overflow: auto;
    background-color: #FF7F26;   
    height: 200px;
    border-left: 2px solid black;
    padding: 10px;
}

index.html

    header header header header header header


    
  
        left side left side left side left side left side
    

    

CSS3 Flexbox Concepts: 
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex
 (rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.
Note: Everything outside a flex container and inside a flex item is rendered as usual.
Flexbox defines how flex items are laid out inside a flex container.
Flex items are positioned inside a flex container along a flex line.
 By default there is only one flex line per flex container.

 It is also possible to change the direction of the flex line.
If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout