Div 不能包含三个 100vw 元素 [重复]

Question

我想创建一个包含 3 个

<div class="chapters">

的

<div class="chapter">

，每个 100vw 宽。

我不知道为什么，但我只能看到其中的两个（第一个不见了），而网络检查器却显示了它们。

这是我的代码：

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chapters {
  background-color: bisque;
  flex-direction: row;
  min-width: 100vw;
}
.chapters .chapter {
  min-width: 100vw;
  height: 100vh;
  background-color: red;
  border: 1px solid white;
}

<div class="container chapters">
  <div class="chapter"></div>
  <div class="chapter"></div>
  <div class="chapter"></div>
</div>

开始时，我没有使用

min-width

.chapter

所以我的所有 3 个 div 都是可见的，但它们是 100/3 vw 宽。

我尝试使用

width

而不是

min-width

来表示

.chapter**s**

，或者使用 % 而不是 vw 但没有任何效果。此外，我试图删除所有其他 HTML 元素，或删除我所有的脚本，但它并没有改变一件事。

Answer 1

禁用弹性项目的收缩。最小的例子：

/* using 100% height instead of 100vh to avoid vertical scrollbar */

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.chapters {
  height: 100%;
  display: flex;
}

.chapter {
  flex-shrink: 0;
  width: 100%;
}

.chapter:nth-child(1) {
  background-color: red;
}

.chapter:nth-child(2) {
  background-color: green;
}

.chapter:nth-child(3) {
  background-color: blue;
}

<div class="container chapters">
  <div class="chapter"></div>
  <div class="chapter"></div>
  <div class="chapter"></div>
</div>

Answer 2

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-start; /* or flex-end */
  align-items: center;
}

.chapters {
  background-color: bisque;
  flex-direction: row;
  min-width: 100vw;
}

.chapters .chapter {
  min-width: 100vw;
  height: 100vh;
  background-color: red;
  border: 1px solid white;
}

   <div class="container chapters">

        <div class="chapter"></div>
        <div class="chapter"></div>
        <div class="chapter"></div>

    </div>