为什么我的100vw元素有一个奇怪的左边隙？

Question

我有一个包含三个元素的框，我还需要一个全宽的viewport元素放在item 2

中

这是显示此问题的笔https://codepen.io/in-in/pen/Nwxoar

我在谈论紫色元素（之后），我希望它占据视口的全宽，但它有一个奇怪的左边距（41px）

＆＃13;

＆＃13;

.container {
  width: 800px;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  background-color: tan;
}

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 80px;
  background-color: deeppink;
}

.box__item1 {
  flex-basis: 200px;
  background-color: dodgerblue;
}

.box__item2 {
  position: relative;
  flex-basis: 500px;
  background-color: coral;
}
.box__item2::after {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  margin-left: calc(50% - 50vw);
  content: "after";
  background-color: blueviolet;
  outline: 1px solid red;
}

.box__item3 {
      flex-basis: 100px;
      background-color: seagreen;
}

＆＃13;

<div class="container">
  <div class="box">
    <div class="box__item1"><span>item 1</span></div>
    <div class="box__item2"><span>item 2</span></div>
    <div class="box__item3"><span>item 3</span></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.box__item2元素具有相对位置。我将position属性移动到.container元素并添加了一个顶部：80px并为after设置了高度：80px。

.container {
  width: 800px;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  background-color: tan;
  position: relative;
}

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 80px;
  background-color: deeppink;
}

.box__item1 {
  -ms-flex-preferred-size: 200px;
      flex-basis: 200px;
  background-color: dodgerblue;
}

.box__item2 {
  -ms-flex-preferred-size: 500px;
      flex-basis: 500px;
  background-color: coral;
}
.box__item2::after {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100vw;
  height: 80px;
  margin-left: calc(50% - 50vw);
  content: "after";
  background-color: blueviolet;
  outline: 1px solid red;
}

.box__item3 {
  -ms-flex-preferred-size: 100px;
      flex-basis: 100px;
  background-color: seagreen;
}

<div class="container">
  <div class="box">
    <div class="box__item1"><span>item 1</span></div>
    <div class="box__item2"><span>item 2</span></div>
    <div class="box__item3"><span>item 3</span></div>
  </div>
</div>

link：https://codepen.io/greensleeves/pen/gXrOQx