Responsive Child div-Skalierung, um Elternbreite anzupassen, Überlaufhöhe

Question

Ich versuche, den besten Weg zu finden, ein reaktionsfähiges Scrollen div zu erhalten, das entweder skaliert oder vergrößert, um den Container anzupassen. Ich habe eine Geige von, wo ich bin bei hier:

JSFIDDLE

Was ich möchte, muss das #scale Element eine Breite von 400px und Höhe auf 320px werden angezeigt wird, so skaliert oder gezoomt auf 80% des Originals. Das #wrap Element muss die Fähigkeit behalten, nach unten zu scrollen und alle #scale auch zu sehen.

Ich brauche das, weil in meiner Anwendung die #contain div ändert Größe die ganze Zeit. Danke für jede Hilfe!

Answer 1

Sie müssen Überlauf auto tun wie, dass es der Browser, der die Bildlaufleiste gesetzt ist, wenn es notwendig ist, ich hoffe, dass das, was Sie für

suchen, und wenn Sie die Breite wollen 80% der #wrap zu sein Sie geben ihm nur die Breite 80% wie, dass es bleibt immer 80%

#contain{ 
 
    width:400px; 
 
    border: 1px green dotted; 
 
    background-color:#ebebeb; 
 
    padding:10px; 
 
} 
 

 
#wrap{ 
 
    height:250px; 
 
    width:100%; 
 
    border:1px red solid; 
 
    background-color: #fff; 
 
    box-sizing:border-box; 
 
    overflow: auto; 
 
} 
 

 
#scale{ 
 
    height:400px; 
 
    width:100%; 
 
    border: 1px blue dashed; 
 
    
 
}

<div id="contain"> 
 
    <div id="wrap"> 
 
    <div id="scale"> 
 

 
    </div> 
 
    </div> 
 
</div>