html - 将两个 float div 保持在较小容器内的同一行上

Question

我正在尝试构建一个大致类似于 this JSFiddle 的布局.现在，问题是:

我的 container 中有这两个包装器，一个用于侧边栏，另一个 (wrapper-inner-container) 用于页面内容本身，两者都是向左浮动，wrapper-sidebar 具有隐藏和显示的机制。

问题是，当 wrapper-sidebar 可见时，wrapper-inner-container 的 width 为 100vw，应保持向左浮动，与 wrapper-sidebar 在同一行，父 container 应保持相同的 宽度 的 100vw 并简单地隐藏水平溢出。但是，正如您在 JSFiddle 中看到的那样，发生的情况是，由于同一行中的两个包装器都超过了容器的宽度，wrapper-inner-container 跳转到下一行，当它是应该与 wrapper-sidebar 保持在同一行，并保持 width 为 100vw。我该如何实现？

Answer 1

如果你的目的是让wrapper-inner-container占用剩余空间，wrapper-sidebar是否可见。然后，您可以省略 wrapper-inner-container 的宽度并删除 float: left。然后它会自动调整到 100% 可用空间，因为它是一个 block 元素。

https://jsfiddle.net/bdxs8x9r/4/ (更新)

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

这里的技巧是 wrapper-sidebar 有一个固定的宽度，而 wrapper-inner-container 会 flex 到它在容器中的剩余空间。

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