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

n1bvdmb6 于 2023-05-23 发布在其他

关注(0)|答案(2)|浏览(108)

此问题已在此处有答案：

Can't scroll to top of flex item that is overflowing container（12个回答）
Why is a flex item limited to parent size?（2个答案）
4天前关闭。
我想创建一个包含3个<div class="chapter">的<div class="chapters">，每个100 vw宽。
我不知道为什么，但我只能看到其中的2个（第一个是失踪），而网页督察显示他们所有。
下面是我的代码：

.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大众宽。
我试着用width而不是min-width来代替.chapter**s**，或者用**%代替vw**，但都不起作用。此外，我试图删除所有其他HTML元素，或删除所有我的脚本，但它并没有改变一件事。

css

来源：https://stackoverflow.com/questions/76289613/div-cannot-contains-three-100vw-elements

2条答案

按热度按时间

iqih9akk1#

.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>

赞(0）回复(0）举报 2023-05-23

s3fp2yjn2#

禁用Flex项目的收缩。最小示例：

/* 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>

赞(0）回复(0）举报 2023-05-23

我来回答

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

2条答案

相关问题

热门标签

最新问答