<div class="contain-size">
<div class="card">
contain: size
</div>
</div>

<div class="contain-none">
<div class="card">
contain: none
</div>
</div>

<div class="contain-layout">
<div class="card">
contain: layout
</div>
</div>

<div class="contain-strict">
<div class="card" style="color:red">
contain: strict
</div>
</div>

<div class="contain-content">
<div class="card">
contain: content
</div>
</div>

<div class="contain-paint">
<div class="card">
contain: paint
</div>
</div>

.contain-none { contain: none; }
.contain-strict { contain: strict; }
.contain-content { contain: content; }
.contain-size { contain: size; }
.contain-layout { contain: layout; }
.contain-paint { contain: paint; }

.card {
  background-color: wheat;
  border: 1px solid peru;
  padding:12px;
  margin-bottom:12px;
  width: 500px;
  height: 50px;
  transition: all 500ms ease;
  position: relative;
  left: 5%;
}

.card:hover { width: 600px; }