Div开始在Chrome Dev Tools中消失

Question

我在Chrome的开发者工具中遇到了一个非常奇怪的问题。简而言之，在检查面板中的chrome工具在添加一些CSS后没有正确呈现我的本地index.html文件，但是相同的代码通过CodePen正确呈现。

<div class="main">
      <div class="home">


        <div class="carousel">
          <div class="carousel__cell">
            <div class="carousel__content">
              <img src="http://via.placeholder.com/1280x720"/>
            </div>
          </div><!--/
          -->
          <div class="carousel__cell">
            <div class="carousel__content">
              <img src="http://via.placeholder.com/1280x720"/>
            </div>
          </div><!--
          -->
          <div class="carousel__cell">
            <div class="carousel__content">
              <img src="http://via.placeholder.com/1280x720"/>
            </div>
          </div><!--
          -->
          <div class="carousel__cell">
            <div class="carousel__content">
              <img src="http://via.placeholder.com/1280x720"/>
            </div>
          </div><!--
          -->
          <div class="carousel__cell">
            <div class="carousel__content">
              <img src="http://via.placeholder.com/1280x720"/>
            </div>
          </div><!--
          -->
          <div class="carousel__cell">
            <div class="carousel__content">
              <img src="http://via.placeholder.com/1280x720"/>
            </div>
          </div><!--
          -->
          <div class="carousel__cell">
            <div class="carousel__content">
              <img src="http://via.placeholder.com/1280x720"/>
            </div>
          </div><!--
          -->
        </div><!--/carousel-->


      </div>
    </div>


body{
  box-sizing: border-box;
}
*, *:before, *:after{
  box-sizing: border-box;
}
img{
  width: 100%;
}

body{
  overflow: hidden;
  background: grey;
}
.main{
  height: 100%;
}
@media(min-width: 1024px){
  }
.carousel{
  display: flex;
}
@media(min-width: 1024px){
.carousel{
    display: block;
    width: 100%;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 50%;
    margin-top: -100%
}
  }
.carousel__cell{
  flex: 0 0 33.33%;
}
@media(min-width: 1024px){
.carousel__cell{

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row-reverse
}
  }
@media(min-width: 1024px){
.carousel__content{
    width: 50%
}
  }

添加以下CSS后会出现此问题

.carousel{display: flex;}
.carousel__cell{flex: 0 0 33.33%;}

如下图所示，.carousel__cell和他们的孩子刚刚消失，布局似乎被打破，但是当我退出开发工具时它们会正确显示。

我在编写CSS方面遵循移动优先原则。在删除上述两条CSS线后，重新加载浏览器也不会回到以前的状态，我必须使用gulp watch重启整个服务器。