Div не может содержать три элемента 100vw
Я хотел бы создать <div class = "chapters">, который содержит 3 <div class = "chapter">, каждая шириной 100vw.
Я не знаю почему, но я вижу только 2 из них (1-й отсутствует), в то время как веб-инспектор показывает их все.
Вот мой код:
.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 или удалить все свои скрипты, но это ничего не меняет.
@SalmanA Я не могу? Я имею в виду, что я не могу сделать горизонтальный сайт?
ваша проблема заключается в оправдании контента, удалите его
Ответы 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>Большое спасибо, теперь я понимаю, почему я не мог видеть свой 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>Спасибо, я никогда не использовал такие флексы, это хорошо знать
ему не нужно отключать сжатие при использовании минимальной ширины, их проблема связана с центрированием
@temani по-разному смотрит на проблему. ОП четко упомянул об использовании ширины с включенным flex-shrink, что вызвало исходную ошибку, когда каждый элемент занимал 1/3 экрана. min-width была его/ее попыткой исправить это, что вызвало другую ошибку. Я бы не назвал это дубликатом.
Я добавил дубликат для каждой ошибки, так что это дубликат
Какой смысл отображать что-то за пределами правого края экрана?