csswrapperviewport

Div cannot contains three 100vw elements


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.


Solution

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