html - 容器相对位置无响应

我有一个页面有几张卡片可以在悬停时翻转，大部分情况下都很好，我遇到的问题是，当页面缩小，卡片堆叠时，底部的卡片不会向下移动。
我已将容器设置为相对位置，但背面是绝对位置。

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 100%;
  min-height: 400px;
}
.flipper {
  -webkit-transition: 0.5s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.5s ease-in-out;
  -moz-transform-style: preserve-3d;
  -ms-transition: 0.5s ease-in-out;
  -ms-transform-style: preserve-3d;
  -o-transition: 0.5s ease-in-out;
  -o-transform-style: preserve-3d;
  transition: 0.5s ease-in-out;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
@import 'card-img';
 .front {
  z-index: 2;
  span {
    display: none;
  }
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  margin-top: 11px;
  padding: 10px;
  border: 3px solid #434343;
  color: $off-white;
  h4 {
    margin: 0;
  }
  .game-title {
    margin-bottom: 10px;
    font-weight: 700;
  }
  .date {
    font-weight: 700;
  }
  .game-info {
    display: table;
    min-height: 245px;
    p {
      display: table-cell;
      vertical-align: middle;
      text-align: justify;
      font-size: 1.1em;
    }
  }
}
.btn-preorder {
  position: relative;
  margin-left: 5%;
  margin-top: 10px;
  width: 90%;
}

<div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">

  <div class="flip-wrap">
    <div class="flip-container">
      <div class="flipper">
        <div class="front front-1"><span>Game Title Here</span>
        </div>
        <div class="back">
          <h4 class="game-title">Star Wars: Battlefront</h4>
          <div class="date">
            Release Date:
            <p>November 20<sup>th</sup> 2015</p>
          </div>
          <div class="game-info">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ducimus omnis modi ipsum ex commodi eum! Cupiditate, id, pariatur. Repellendus, id, incidunt. Labore ea, blanditiis, officia pariatur exercitationem earum autem. Lorem ipsum
              dolor sit amet, consectetur adipisicing elit. Recusandae animi, laboriosam cum rem fugit, quis, et sed, laudantium ipsa reprehenderit aut unde ad tempora expedita libero dolor est repellat. Unde. Lorem ipsum dolor sit amet, consectetur adipisicing
              elit. Dolorem enim quam autem sunt ipsam tempora rem eum illo soluta odio in blanditiis quis repellat sequi, nihil ad laborum, totam consequuntur.</p>
          </div>
          <div class="btn btn-primary btn-preorder">Pre-order</div>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- End col -->

最佳答案

这是因为.back超过width: 100%;。您可以通过添加box-sizing: border-box;
这样地

.front, .back {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
     box-sizing: border-box;
}

这是工作演示

body {
    overflow: hidden;
}
.flip-container {
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     -o-perspective: 1000;
     perspective: 1000;
}
 .flip-container:hover .flipper, .flip-container.hover .flipper {
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     transform: rotateY(180deg);
}
 .flip-container, .front, .back {
     width: 100%;
     min-height: 400px;
}
 .flipper {
     -webkit-transition: 0.5s ease-in-out;
     -webkit-transform-style: preserve-3d;
     -moz-transition: 0.5s ease-in-out;
     -moz-transform-style: preserve-3d;
     -ms-transition: 0.5s ease-in-out;
     -ms-transform-style: preserve-3d;
     -o-transition: 0.5s ease-in-out;
     -o-transform-style: preserve-3d;
     transition: 0.5s ease-in-out;
     transform-style: preserve-3d;
     position: relative;
}
 .front, .back {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
     box-sizing: border-box;
}
 .front {
     z-index: 2;
}
 span {
     display: none;
}
 .back {
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     transform: rotateY(180deg);
     margin-top: 11px;
     padding: 10px;
     border: 3px solid #434343;
     color: $off-white;
}
 h4 {
     margin: 0;
}
 .game-title {
     margin-bottom: 10px;
     font-weight: 700;
}
 .date {
     font-weight: 700;
}
 .game-info {
     display: table;
     min-height: 245px;
}
 p {
     display: table-cell;
     vertical-align: middle;
     text-align: justify;
     font-size: 1.1em;
}
 .btn-preorder {
     position: relative;
     margin-left: 5%;
     margin-top: 10px;
     width: 90%;
}
 body {
     margin: 0;
}

<div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
    <div class="flip-wrap">
        <div class="flip-container">
            <div class="flipper">
                <div class="front front-1"><span>Game Title Here</span> </div>
                <div class="back">
                    <h4 class="game-title">Star Wars: Battlefront</h4>
                    <div class="date"> Release Date:
                        <p>November 20<sup>th</sup> 2015</p>
                    </div>
                    <div class="game-info">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ducimus omnis modi ipsum ex commodi eum! Cupiditate, id, pariatur. Repellendus, id, incidunt. Labore ea, blanditiis, officia pariatur exercitationem earum autem. Lorem ipsum
                            dolor sit amet, consectetur adipisicing elit. Recusandae animi, laboriosam cum rem fugit, quis, et sed, laudantium ipsa reprehenderit aut unde ad tempora expedita libero dolor est repellat. Unde. Lorem ipsum dolor sit amet, consectetur adipisicing
                            elit. Dolorem enim quam autem sunt ipsam tempora rem eum illo soluta odio in blanditiis quis repellat sequi, nihil ad laborum, totam consequuntur.</p>
                    </div>
                    <div class="btn btn-primary btn-preorder">Pre-order</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End col -->