如何使容器高度适合动态内容大小

Question

我正在尝试实现此卡片翻转功能，但需要容器的高度以适合所有内容。 请注意，卡片的背面比正面有更多的内容。

最终，每张卡片的内容都是动态的，因此需要不同的高度来充分包含内容。 我如何实现这一目标？ 我尝试将容器的高度设置为 100% 并自动设置为无济于事。 想法？

这是完整的代码：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #2980b9;
  color: black;
}

.flip-card-back {
  background-color: #bbb;
  color: red;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h1>John Doe</h1> 
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <p>10</p>
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <p>10</p>
      <p>11</p>
      <p>12</p>
      <p>13</p>
      <p>14</p>
    </div>
  </div>
</div>

</body>
</html>```

Answer 1

尝试min-height: 100%; 而不是height: 100%; 在.flip-card-front, .flip-card-back中。 你必须移动box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 到.flip-card-front, .flip-card-back否则它将应用于初始高度，并且您会在卡片背面的中间看到阴影。 请参阅工作片段。

 .flip-card { background-color: transparent; width: 300px; height: 300px; perspective: 1000px; }.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }.flip-card:hover.flip-card-inner { transform: rotateY(180deg); }.flip-card-front, .flip-card-back { position: absolute; width: 100%; min-height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }.flip-card-front { background-color: #2980b9; color: black; }.flip-card-back { background-color: #bbb; color: red; transform: rotateY(180deg); }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <h1>John Doe</h1> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> </div> </div> </div> </body> </html>

Answer 2

您可以在现代浏览器中使用height: max-content 。

当应用于容器时，里面的内容将决定它的高度。