html - CSS - 动态高度

Question

我正在尝试构建一个具有动态高度的点击式翻转卡片，具体取决于其中的元素。现在，我将高度明确设置为 250 像素，但理想情况下我希望尺寸是动态的。这可能吗？

我试过将高度设置为 100%，但这显然不起作用。我也试过制作一个 flexbox，但这似乎也不起作用。此外，我还尝试使用 min-height=250px...不知道为什么它也不起作用。非常感谢任何有关如何正确确定 CSS 的类(class)!

这是我的 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

是的。这是可能的。

高度:自动；


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

只要您有 250px 的硬编码值，就不可能。