Verhindern vertikalen Bildlauf auf Körperelement, wenn Inhalt zu div mit Höhe hinzugefügt: 100%

Question

Das Problem ist, dass ich nicht die Bildlaufleiste auf Körper möchte, wenn ich etwas Inhalt über dem scrollbaren div anhängen.

Wenn ich versuche, div height weniger als 100% zu machen, verschwindet die Bildlaufleiste auf dem Körper, aber wenn ich das Fenster verkleinere, erscheint die Bildlaufleiste auf dem Körper wieder.

Hier ist ein fiddle Beispiel von dem, was ich versuche zu tun.

* {margin:0;padding:0;} 
 
    html, body{ 
 
     height:100%; 
 
     background:#eee; 
 
    } 
 
    #menu { 
 
     background:#ccc; 
 
     width:220px; 
 
     height:100%; 
 
    } 
 
    .wrapper { 
 
     height: 100%; 
 
    } 
 
    #menu ul { 
 
     height: 100%; 
 
     overflow: auto; 
 
    }  

<div class="wrapper"> 
 
<p> 
 
    some other content 
 
    </p> 
 
    <p> 
 
    some other content 
 
    </p> 
 
    <p> 
 
    some other content 
 
    </p> 
 
<div id="menu"> 
 
    
 
    <ul> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

revised fiddle

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    background: #eee; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
#menu { 
 
    background: #ccc; 
 
    width: 220px; 
 
    flex: 1; /* use all available height */ 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <p>some other content</p> 
 
    <p>some other content</p> 
 
    <p>some other content</p> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
     <li>owepwew</li> 
 
    </ul> 
 
    </div> 
 
</div>