Question

我正在进行下面的布局：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.tier-1 {
  flex: 0 0 40px;
}

.tier-2 {
  flex: 0 0 50px;
  background-color: steelblue;
}

.stuff {
  flex: 1 0 100px;
  background-color: navy;
  padding: 20px;
  overflow: auto;
}

.block-row {
  display: flex;
  margin-bottom: 10px;
  justify-content: center;
}

.block {
  flex: 0 0 470px;
  background-color: white;
  height: 300px;
  border-radius: 5px;
  margin: 20px;
  border: 2px solid grey;
}

.block.wide {
  flex: 0 0 950px;
  height: 150px;
  justify-content: flex-start;
}

<div class="tier-1"></div>
<div class="tier-2"></div>
<div class="stuff">
  <div class="block-row">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="block-row">
    <div class="block wide"></div>
  </div>
</div>

也可以在此Codepen上编辑：http://codepen.io/brad_julian/pen/BpzmYy/

问题是如果视口太粗，第一行中的框会被切断。我想要的是“.stuff”空间在窗口太小时有一个水平滚动条。

知道为什么不行吗？

编辑：我的问题与this question相同（水平，不垂直）

Flexbox不考虑溢出的全宽度

0 个答案: