CSS - динамическая высота

Question

Я пытаюсь создать флип-карту по нажатию с динамической высотой, зависящей от элементов внутри нее.Прямо сейчас, у меня есть высота, явно установленная на 250 пикселей, но в идеале я хотел бы, чтобы размер был динамическим.Возможно ли это?

Я пытался установить высоту на 100%, но это, очевидно, не сработало.Я также попытался сделать flexbox, но это тоже не сработало.Кроме того, я также попытался использовать min-height = 250px ... не уверен, почему это тоже не работает.Любые уроки о том, как правильно определить CSS, приветствуются!

Вот мои HTML и CSS:

label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  width: 100%;
	height: 250px;
  cursor: pointer;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}

.card div, .card span {
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;	
}

.card div {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card .back {
  background: $color-lightest;
  color: $color-darkest;
  border: 1px solid $color-darkest;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

input {
  display: none;
}

:checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.icon-color, .icon-background {
  color: $color-accent-light;
}

.front.icon-color {
  z-index:100;
}

.card .front, .card .back {
  padding:1.5em;
}

.card .front {
  background: $color-darkest;  
}

.title{
  text-align:center;
  color: $color-lightest;
}

<label>
  <input type="checkbox"/>
  <div class="card">
    <div class="front">
      <span class="fa-stack fa-5x">
        <i class="far fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-user fa-1x icon-color" aria-hidden="true"></i>
      </span>
      <h2 class="title">My Information</h2>
    </div>
    <div class="back">
      <h3>Header</h3>
      <h5>Subheader</h5>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
    </div>
  </div>
</label>

Answer 1

Просто позволить браузеру рассчитать высоту должно работать.Так что не указывайте высоту.Но мне также пришлось перевести вашу карту, чтобы показать, где она должна быть после 180 оборотов.Так может в этом твоя проблема?

label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: flex
  flex-direction: column;
  height: 100%;
  width: 100%;
  cursor: pointer;
  background: red;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}

.card div, .card span {
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;	
}

.card div {
  position: absolute;
  //height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card .back {
  background: wheat;
  color: black;
  border: 1px solid grey;
  -webkit-transform: rotateX(180deg) translateY(100%); // translate missing?
  transform: rotateX(180deg) translateY(100%); // translate missing?
}

input {
  display: none;
}

:checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.icon-color, .icon-background {
  color: $color-accent-light;
}

.front.icon-color {
  z-index:100;
}

.card .front, .card .back {
  padding:1.5em;
}

.card .front {
  background: $color-darkest;  
}

.title{
  text-align:center;
  color: $color-lightest;
}

<label>
  <input type="checkbox"/>
  <div class="card">
    <div class="front">
      <span class="fa-stack fa-5x">
        <i class="far fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-user fa-1x icon-color" aria-hidden="true"></i>
      </span>
      <h2 class="title">My Information</h2>
    </div>
    <div class="back">
      <h3>Header</h3>
      <h5>Subheader</h5>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
    </div>
  </div>
</label>

Answer 2

Я считаю, что проблема в жестко заданной высоте, но ТАКЖЕ, в абсолютном позиционировании.Просто комментируя эти подсказки.

label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  width: 100%;
/* 	height: 250px; */
  cursor: pointer;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}

.card div, .card span {
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;	
}

.card div {
 /*  position: absolute; */
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card .back {
  background: $color-lightest;
  color: $color-darkest;
  border: 1px solid $color-darkest;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

input {
  display: none;
}

:checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.icon-color, .icon-background {
  color: $color-accent-light;
}

.front.icon-color {
  z-index:100;
}

.card .front, .card .back {
  padding:1.5em;
}

.card .front {
  background: $color-darkest;  
}

.title{
  text-align:center;
  color: $color-lightest;
}

<label>
  <input type="checkbox"/>
  <div class="card">
    <div class="front">
      <span class="fa-stack fa-5x">
        <i class="far fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-user fa-1x icon-color" aria-hidden="true"></i>
      </span>
      <h2 class="title">My Information</h2>
    </div>
    <div class="back">
      <h3>Header</h3>
      <h5>Subheader</h5>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
    </div>
  </div>
</label>

Answer 3

Да.Это возможно.

height: auto;

https://developer.mozilla.org/en-US/docs/Web/CSS/height

Пока у вас есть жестко запрограммированное значение 250px, это будет невозможно.