Div cannot contains three 100vw elements

Question

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.

What's the point of displaying something outside the right edge of screen? — Salman A, May 19 '23 at 13:38
@SalmanA I cannot ? I mean I can't make a a horizontally website ? — ImEmo, May 19 '23 at 13:39

score 1 · Accepted Answer · answered May 19 '23 at 13:42

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

Thanks so much, I understand now why I could not see my 1st element — ImEmo, May 19 '23 at 13:48

Salman A · Answer 2 · 2023-05-19T13:51:39.237

1

Disable shrinking on flex items. Minimal example:

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

edited May 19 '23 at 13:51

answered May 19 '23 at 13:43

Salman A

262,204
82
430
521

Thanks, I have never used flex like this, it's good to know – ImEmo May 19 '23 at 13:49
1

he doesn't need to disable the shrink when using min-width, their issue is related to centring – Temani Afif May 19 '23 at 13:52
@temani different ways of how you look at the problem. OP clearly mentioned using width with flex-shrink enabled which caused the original error, each item being 1/3 of screen. min-width was his/her attempt at fixing it which caused the different error. I would not call it a duplicate. – Salman A May 19 '23 at 14:09
I added a duplicate for each error so it's a duplicate – Temani Afif May 19 '23 at 14:16

Div cannot contains three 100vw elements

2 Answers2