具有水平溢出的嵌套 Flexbox

Question

我正在使用嵌套的 flexbox 布局。

我希望左侧导航始终为页面的 1/3，右侧始终为 2/3。

左侧导航应始终保持在视野中。

右侧（在我的情况下是图像轮播）应始终占据 2/3 的位置，并且在框上有一个水平滚动条。

在下面的代码中，它只是简单地拉伸并忽略溢出。

<div>
  Top Header (should stay in view)
</div>
<div style="display: flex">
  <div style="flex: 1 0 auto">
    LeftNav
  </div>
  <div style="flex: 2 0 auto">
    <div style="display: flex; flex-direction: row; overflow-x: scroll">
      <div style="background-color: blue; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: red; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: green; min-width: 400px; height: 500px">
      </div>
    </div>
  </div>

Answer 1

而不是flex-grow，它只是在容器中分配可用空间，而是使用flex-basis，它明确地将您的项目大小设置为 1/3 和 2/3。

然后，因为弹性项目的默认最小宽度是min-width: auto，这意味着它们不能小于其内容的大小，用于min-width: 0覆盖轮播上的默认值。

<div>
  Top Header (should stay in view)
</div>
<div style="display: flex">
  <div style="flex: 0 0 33%">LeftNav</div>
  <div style="flex: 0 0 67%; min-width: 0;">
    <div style="display: flex; flex-direction: row; overflow-x: scroll">
      <div style="background-color: blue; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: red; min-width: 400px; height: 500px">
      </div>
      <div style="background-color: green; min-width: 400px; height: 500px">
      </div>
    </div>
  </div>