Html 为什么儿童div不'；t扩展到flex行容器之外

请参阅代码笔中的问题：

我有一个flex容器，其中有一个水平滑块，其中的元素与整个页面宽度一样长

但是我意识到我不能控制子元素的宽度，因为它们总是有一个宽度使它们适合容器，并且它们不会超出容器

不过我发现了一个窍门。如果我将我的子div一个接一个地包装成一个div，它将按我所希望的那样工作

为什么这样做？

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 40vh;
  max-width: 100%;
  overflow-x: hidden;
  border: 5px solid black;
  margin: 0 auto;
}

.box {
  position: relative;
  width: 90vw;
  margin: 10px;
  line-height: 10vh;
  text-align: center;
  background: black;
  color: white;
  border: 5px solid red;
}

框的宽度应为100vw
盒子
盒子
盒子
但这一个有
盒子
盒子
盒子

您可以控制flex子项的宽度。所有flex子项都有默认的

flex

值来控制

flex grow

和

flex shrink

属性。禁用这些属性，您就可以控制宽度

将这些行添加到CSS中

/**
 * Disable flex grow and shrink so that it no longer tries to divide the
 * space between the .box elements.
 *
 * Use flex-basis or width to control the width of the element.
 */
.box {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 90vw;
    width: 90vw;
}

---

没有一个h3元素正确闭合。第一个重复用于解释第一个代码，第二个重复用于解释第二个代码