Halten Sie zwei floated Divs auf der gleichen Linie in einem kleineren Container

Question

Ich versuche ein Layout zu erstellen, das ungefähr wie this JSFiddle aussieht. Nun, das Problem ist:

Ich habe diese zwei Wrapper in meinem container, ist eine für die Sidebar und die andere (wrapper-inner-container) ist für den Seiteninhalt selbst, sowohl nach links als schweben und die wrapper-sidebar hat einen Mechanismus verstecken und zeigen.

Die Sache ist die, wenn die wrapper-sidebar sichtbar ist, die wrapper-inner-container, die ein width von 100vw hat, soll als wrapper-sidebar und die Mutter container nach links, in der gleichen Zeile schwamm bleiben soll mit der gleichen width von 100vw bleiben und verstecken Sie einfach den horizontalen Überlauf. Wie Sie jedoch im JSFiddle sehen können, springt die wrapper-inner-container in die nächste Zeile, wenn sie in derselben Zeile bleibt wie die wrapper-sidebar und da beide Wrapper in derselben Zeile die Breite des Containers überschreiten Bleiben Sie mit einem width von 100vw. Wie erreiche ich das?

Answer 1

Wenn Ihr Zweck für wrapper-inner-container ist, nehmen Sie den verbleibenden Platz mit wrapper-sidebar sichtbar oder nicht auf. Dann können Sie dies tun, indem Sie die Breite von wrapper-inner-container auslassen und float: left entfernen. Es wird dann automatisch auf 100% verfügbaren Speicherplatz Größe, da es ein Blockelement ist.

https://jsfiddle.net/bdxs8x9r/4/ (aktualisiert)

Auch hier ist ein Beispiel dafür, wie man es ein bisschen mehr konsequent mit flex-box erreichen kann:

Der hier Trick ist, dass wrapper-sidebar eine feste Breite hat und wrapper-inner-container verbiegt, um es verbleibende Raum ist im Behälter.

https://jsfiddle.net/bdxs8x9r/3/

Answer 2

Um dies zu tun, müssen Sie einen übergeordneten Container werden zu schaffen, die den Hauptbehälter enthält, die Sie seinen Überlauf versteckt und seine Breite eingestellt werden, um 100vw

stellen Sie dann die Haupt Behälterbreite zu 100vw plus die Sidebar Größe, so dass diese Art und Weise der Seitenleiste den Raum hat den Innenbehälter in

<style> 
.overflow { 
    width: 100vw; 
    overflow: hidden; 
} 
.container { 
    width: 115vw; 
} 
.wrapper-sidebar { 
    float: left; 
    width: 15vw; 
} 
.wrapper-inner-container { 
    width: 100vw; 
    float: left; 
} 
</style> 

<script> 
// do your animation code here 
</script> 

<div class="overflow"> 
    <div class="container"> 
     <div class="wrapper-sidebar"></div> 
     <div class="wrapper-inner-container"></div> 
    </div> 
</div>