Scrollen nur Inhalt div, andere sollten behoben werden

• zuerst müssen Sie eine feste Höhe für den Inhaltsbereich haben.
• dann mache overflow:auto dort

FEHLER in Ihrem Code :: Sie möchten eine Bildlaufleiste für ein div haben, aber diese Div-Höhe wird als auto deklariert.

sie können keine Bildlaufleiste verlangen, wenn die Höhe automatisch ist. Um eine Bildlaufleiste zu haben, benötigen Sie eine feste Höhe für das div. Wenn die Höhe des Inhalts größer als die div-Höhe ist, wird automatisch eine Bildlaufleiste eingefügt

HINWEIS: so werden die Änderungen in Ihrer CSS vorgenommen

#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
}

BEISPIEL :: GEIGE

Sie können die Position einfach verwenden. 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;
}

Wenn Sie möchten, dass die Kopfzeile und die linke Seite beim Scrollen in ihrer Position bleiben, müssen Sie position:fixed verwenden.

#left_side{
    ...
    overflow:auto;  

}

Legen Sie auch einen padding-right fest, um einen Abstand zwischen dem inneren Inhalt von div und der Bildlaufleiste zu erstellen

Als Lernübung entschied ich mich, die Antwort mithilfe von CSS3 Flexbox zu aktualisieren. Ich habe auch versucht, das Layout, das von jstorm31 erstellt werden sollte, genauer anzupassen.

Die Antwort von Ritabrata ist die richtige: Wenn ein bestimmtes Element Bildlaufleisten enthalten soll, müssen Sie die Höhe (und/oder Breite) auf eine feste Größe und den Überlauf auf auto einstellen.

Code ist auch hier zu finden: 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>