Html 将两个浮动div放在一个较小的容器内的同一条线上

我试图构建一个大致如下的布局。现在，问题是：

在我的

容器

中有两个包装器，一个用于侧栏，另一个（

包装器内部容器

）用于页面内容本身，两者都浮动到左侧，

包装器侧栏

具有隐藏和显示机制

---

问题是，当

包装器侧栏可见时，宽度
为
100vw
的
包装器内部容器应保持向左浮动，在与
包装器边栏
相同的行上，父
容器
应保持与
100vw
相同的
宽度
，并仅隐藏水平溢出。但是，正如您在JSFIDLE中所看到的，由于同一行中的两个包装器都超过了容器的宽度，
包装器内部容器
跳到下一行，此时它应该与
包装器侧栏保持在同一行，并且保持
宽度
为
100vw
。如何实现这一点？
如果您的目的是让
包装器内部容器
在
包装器侧栏
可见或不可见的情况下占用剩余空间。然后，您可以省略
包装器内部容器的宽度，并删除
float:left
。然后它将自动调整为100%可用空间，因为它是块元素

（更新）

这里还有一个示例，说明如何使用
flex-box
更一致地实现它：

这里的技巧是，
wrapper侧边栏
具有固定的宽度，
wrapper-inner-container
在容器中的剩余空间进行弯曲

如果您的目的是
包装器内部容器
占用剩余空间，而
包装器侧栏
是否可见。然后，您可以省略
包装器内部容器的宽度，并删除
float:left
。然后它将自动调整为100%可用空间，因为它是块元素

（更新）

这里还有一个示例，说明如何使用
flex-box
更一致地实现它：

这里的技巧是，
wrapper侧边栏
具有固定的宽度，
wrapper-inner-container
在容器中的剩余空间进行弯曲

为此，必须创建一个包含主容器的父容器，将其溢出设置为隐藏，宽度设置为100vw

然后将主容器宽度设置为100vw加上侧栏大小，这样侧栏将有空间将内部容器推入

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


.溢出{
宽度：100vw；
溢出：隐藏；
}
.集装箱{
宽度：115vw；
}
.包装器侧栏{
浮动：左；
宽度：15vw；
}
.包装内容器{
宽度：100vw；
浮动：左；
}
//在这里输入动画代码
为此，您必须创建一个包含主容器的父容器，将其溢出设置为隐藏，将其宽度设置为100vw

然后将主容器宽度设置为100vw加上侧栏大小，这样侧栏将有空间将内部容器推入

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


.溢出{
宽度：100vw；
溢出：隐藏；
}
.集装箱{
宽度：115vw；
}
.包装器侧栏{
浮动：左；
宽度：15vw；
}
.包装内容器{
宽度：100vw；
浮动：左；
}
//在这里输入动画代码
事实上，事实证明使用flex box要简单得多，谢谢。事实证明，使用flex box要简单得多，谢谢