jQuery-Flip：翻转的div的大小小于前面的div

我正在使用这个jQuery插件：

问题是，当我翻转一个div时，翻转的div比应该的小。请看这张gif：

我希望翻转div的大小与原始div的大小相同。出了什么问题

以下是我的实现：

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="<%=i%>" value="<%=card[1]%>" class="flip p-2">

      <div class="front yellowishcard text-center cardsize p-3">
        <%= card[0] %>
      </div>

      <div class="back yellowishcard text-center cardsize p-3">
        <%= card[0] %>
      </div>

    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="<%=i%>" value="<%=card[1]%>" class="flip m-2">

  <div class="front yellowishcard text-center cardsize p-3">
    <%= card[0] %>
  </div>

  <div class="back yellowishcard text-center cardsize p-3">
    <%= card[0] %>
  </div>

</div>

“p-2”和“p-3”是bootstrap 4中的类：

“flip”没有样式，它只是让我的javascript工作

---

当我只使用这些类时，同样的问题也会出现：

后黄色卡片

和

前黄色卡片

我发现了问题。问题是由KresimirPendic所暗示的。问题是由一个p-2引起的。当我将p-2改为m-2时，问题就消失了。工作执行：

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="<%=i%>" value="<%=card[1]%>" class="flip p-2">

      <div class="front yellowishcard text-center cardsize p-3">
        <%= card[0] %>
      </div>

      <div class="back yellowishcard text-center cardsize p-3">
        <%= card[0] %>
      </div>

    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="<%=i%>" value="<%=card[1]%>" class="flip m-2">

  <div class="front yellowishcard text-center cardsize p-3">
    <%= card[0] %>
  </div>

  <div class="back yellowishcard text-center cardsize p-3">
    <%= card[0] %>
  </div>

</div>

---

显示：块

应该为

.cardsize

@Martijn I删除了“display:flex；”并添加了“display:block；”，但同样的问题仍然存在。还有什么建议吗？请尝试从

.cardsize

中删除

对齐项目。。您已经启动了
文本中心
类定义。。或者尝试从中删除该类html@KresimirPendic我删除了对齐项，但问题仍然存在。我之所以需要它，是为了垂直对齐项目。文本中心只将文本水平居中。好的，你能用
flip
和
p-2，p-3
css类定义更新你的问题吗？