How do I make a container height fit dynamic content sizes-CodePudding

I'm trying to implement this card flip feature, but need the height of the container to fit all of the content. Note that the back of the card has more content that the front.

Ultimately, the content of each card will be dynamic and will therefor need varying height to adequately contain the content. How do I achieve this? I've tried making the height of the container set to 100% and auto to no avail. Thoughts?

Here's the code in full:

<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>```

CodePudding user response：

Try min-height: 100%; instead of height: 100%; in .flip-card-front, .flip-card-back. And you'll have to move the box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); to .flip-card-front, .flip-card-back otherwise it will apply to the initial height and you'll get a shadow in the middle of the back side of your card. See working snippet.

.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>

CodePudding user response：

You can use height: max-content in modern browsers.

When applied to the container, the contents inside will dictate its height.