Прокрутка только содержимого div, остальные должны быть исправлены

Если вы хотите, чтобы заголовок и левая сторона оставались на своих местах во время прокрутки, вам придется использовать position:fixed

#left_side{
    ...
    overflow:auto;  

}

Установите также padding-right, чтобы создать пространство между внутренним содержимым div и полосой прокрутки

• сначала вам нужно будет иметь фиксированную высоту для области содержимого.
• затем сделайте overflow:auto там

ОШИБКА в вашем коде: вы хотите иметь полосу прокрутки для div, но вы объявляете эту высоту div как auto

Вы не можете требовать полосу прокрутки, когда высота установлена ​​автоматически, чтобы иметь полосу прокрутки, вам нужно иметь фиксированную высоту для этого div, и когда высота содержимого будет больше высоты div, будет введена прокрутка. бар автоматически

ПРИМЕЧАНИЕ: , поэтому изменения в вашем css будут

#content{
 height: 300px;/*..very important if you want scroll bar...*/
 overfow:auto; /*..will introduce scroll bar when needed..*/
 padding: 20px;
 margin-left: 230px;
 margin-right: 20px;
padding-bottom: 30px
}

ПРИМЕР :: FIDDLE

В качестве учебного упражнения я решил обновить ответ с помощью CSS3 Flexbox. Я также попытался более точно соответствовать макету, который пытался создать jstorm31.

Ответ Ритабраты правильный: если вы хотите, чтобы у определенного элемента были полосы прокрутки, вам нужно установить его высоту (и / или ширину) на фиксированный размер и переполнить на автоматический.

Код также можно найти здесь: 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

<div id="header">
    header header header header header header
</div>
<div id="side_and_content">
    <div id="left_side">  
        left side left side left side left side left side
    </div>

    <div id="content">
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.<br>
 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
    </div>
</div>

Вы можете просто использовать фиксированное положение. http://jsfiddle.net/Nrs2u/1/

#header {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 10%;
    background-color: purple;
}
#side {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 10%;
    width: 10%;
    height: 90%;
    background-color: red;
}
#body {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 90%;
    height: 300%;
    background-color: orange;
}