填充剩余屏幕空间的宽度（跨容器）

Question

我正在使用 Bootstrap 4 Alpha 3 (Flexbox enabled version)。

Jsfiddle

body {
  background-color: lightgreen;
}
[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      AA
    </div>
    <div class="col-xs-10">
      BB
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      CC
    </div>
    <div class="col-xs-6">
      DD
    </div>
  </div>
</div>

这就是现在的样子：

有没有办法（尤其是使用 Flexbox）让BB 填充剩余屏幕空间的宽度（跨越container），如下所示？谢谢

Answer 1

BB 元素是一个 in-flow flex 项目并且被限制在它的容器中 (.row)。

要使其溢出其父级并占用视口的剩余宽度，您可以尝试以下操作：

.container > .row:first-child > .col-xs-10 {   /* 1 */
  position: absolute;                          /* 2 */
  width: 100%;                                 /* 3 */
  margin-left: 16.7%                           /* 4 */
}

.container > .row:first-child {
  position: relative;                          /* 5 */
}

body {
  background-color: lightgreen;
}

[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-2">AA</div>
    <div class="col-xs-10">BB</div>
  </div>
  <div class="row">
    <div class="col-xs-6">CC</div>
    <div class="col-xs-6">DD</div>
  </div>
</div>

revised fiddle

注意事项：

1. 定位 BB 元素。
2. 从document flow 中删除 BB
3. 任意全宽
4. 将 BB 定位在 AA 的右侧（宽度为 flex: 0 0 16.66667%）
5. 将容器作为绝对定位子级的边界框 (nearest positioned ancestor)。

当然，这种方法的一个（潜在）问题是第 3 项。

因为 BB 相对于其父级是绝对定位的，所以我们不知道到视口边缘的确切长度。如我的示例所示，提供过多的宽度会导致水平滚动条。

一种解决方法是将overflow-x: hidden 应用于body 元素，这将移除滚动条，只需在视口边缘剪裁BB。

或者我们可以从父级中移除position: relative，从而使BB 相对于视口。此方法可以将 BB 精确到视口边缘，但以第 4 项为代价：margin-left 将不再精确。

但让我们试一试：

编辑：除了margin-left 的缺陷之外，这种方法还有另一个缺陷。我没有删除该示例，而是将其保留用于学习目的。看看你能不能在到达终点之前找到问题:-)

.container > .row:first-child > .col-xs-10 {   
  position: absolute;                          
  width: 75%;                                  /* 6 */
  margin-left: 25%;                            /* 6 */
  left: 0;                                     /* 6 */
}

.container > .row:first-child > .col-xs-2 {    /* 7 */
    flex-grow: 1;
}

body {
  background-color: lightgreen;
}

[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-2">AA</div>
    <div class="col-xs-10">BB</div>
  </div>
  <div class="row">
    <div class="col-xs-6">CC</div>
    <div class="col-xs-6">DD</div>
  </div>
</div>

revised fiddle

注意事项：

6. BB 的大小、对齐和定位相对于初始包含块（即视口）。
7. AA（在原始代码中的大小为 flex: 0 0 16.666667%）被赋予 flex-grow: 1 以填补其与 BB 之间的任何空白。

现在 BB 正好在视口边缘结束。但是，我们不得不让 AA 稍微“弯曲”，以防止由于 BB margin-left 不精确而出现任何间隙。

编辑：上述方法的问题是：因为 BB 是绝对定位的，所以它从文档流中删除。这意味着 AA 甚至不知道它的存在。因此，AA 上的flex-grow 会将其一直扩展到容器的边缘，而不是 BB 的开头。。

---

其他选择包括：

1. 使容器全宽，然后管理弹性项目的长度和边距。 （这会涉及到对 Bootstrap 框架的重大改动，这就是我没有研究它的原因。）

2. JavaScript

Answer 2

由于看起来超出容器的背景是纯粹的视觉要求，它不会包含实际的内容，我们可以使用@987654321 中列出的技术@。

我们绝对将一个 100vw 宽的伪元素放在相关元素后面，并将overflow-x:hidden 应用于body，这样我们就不会得到水平滚动条。

body {
  background-color: lightgreen;
  overflow-x:hidden;
  margin:0;
  padding:0;
}
[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

.expando {
  position:relative;
  }

.expando::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100vw;
  background:inherit;
  z-index:-1;
  }

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      AA
    </div>
    <div class="col-xs-10 expando">
      BB
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      CC
    </div>
    <div class="col-xs-6">
      DD
    </div>
  </div>
</div>