I would like to create a <div class="chapters">
that contains 3 <div class="chapter">
, each 100vw wide.
I do not know why, but I can only see 2 of them (1st one is missing) while the web inspector show them all.
Here is my code:
.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>
At the beginning, I did not use min-width
for .chapter
so my all 3 div were visible but they were 100/3 vw wide.
I tried to use width
and not min-width
for .chapter**s**
, or use % instead of vw but nothing works. Besides, I tried to remove all others HTML elements, or to remove all my scripts but it does not change a thing.
2
Answers
Disable shrinking on flex items. Minimal example: