html - 尝试使用 flexbox 和 css 字体大小根据最大内容制作 div 高度会破坏 flex : auto

Question

我有一个包含多个 flex 元素的 flex 容器，其中 2 个我需要根据文本进行 flex 增长，这样所有的 div 空间都相同。

我是这样完成的:

<div class="outer product-grid">
  <div class="inner product-component">
    <a class="image"><img class="product-image" /></a>
    <a class="upper-text title">
      Short Upper Text
    </a>
    <div class="lower-text author">
      Short Lower Text
    </div>
    <h5 class="price"> <span>price</span> </h5>
  </div>

  <div class="inner">
    <a class="image"><img class="product-image" /></a>
    <a class="upper-text">
      Long Upper Text - Long Upper Text
    </a>
    <div class="lower-text">
      Long Lower Text - Long Lower Text
    </div>
    <h5 class="price"> price </h5>
  </div>

    <div class="inner">
      <a class="image"><img class="product-image" /></a>
    <a class="upper-text">
      Even Longer Upper Text - Even Longer Upper Text
    </a>
    <div class="lower-text">
      Even Longer Lower Text - Even Longer Lower Text
    </div>
    <h5 class="price"> price </h5>
  </div>
</div>

SCSS

.outer {
  display: flex;
  flex: wrap;
  .inner {
    border: 5px solid yellow;
    display: flex;
    text-align: center;
    margin-right: 1em;
    margin-bottom: 1.5em;
    width: 200px;
    flex-direction: column;
    font-size: 1.00em;
    a.image{
      border: 5px solid orange;
      img {
        width: em(160px);
        height: em(210px);
      }
    }
    a.upper-text {
      border: 5px solid red;
      flex: auto;
      margin: 0.2em auto;
      line-height: normal;
    }
    .lower-text {
      border: 5px solid green;
      flex: auto;
    }
  }
}

我的上文字和下文字需要不同的大小。当我将 font-size 放入其中任何一个类时，我失去了整个 flex grow。

你可以试试我的codepen https://codepen.io/mxdavis/pen/KxxmKE通过在第 24 行和第 25 行之间(在 a.upper-text 类中)插入 font-size: 20px;，您将看到红色边框不再像字体没有调整。 https://codepen.io/mxdavis/pen/dqqzMy

我需要均匀大小的框和调整后的字体大小。 Flex 似乎是最简单的路线，因为无法预测上层文本和下层文本。

非常感谢任何建议。

谢谢!

更新:我现在意识到，如果我调整文本大小并且不使上下文本相等，即使我的第一个代码片段也不起作用，这可能就是字体增加导致它失败的原因。有没有办法做到这一点，或者我应该只设置一个固定的高度，然后单击以显示更多？ https://codepen.io/mxdavis/pen/KxxedE

Answer 1

我能够(在大多数情况下)同时使用 flex 和 grid 来完成此操作。

我仍然需要为不可预测的文本猜测最大模板行，但至少我可以保证以此为起点。

https://codepen.io/mxdavis/pen/KxxedE

这是带有 .inner 的新 css，现在使用 display: grid 而不是 flex。

.outer {
  display: flex;
  flex-flow: row wrap;
  .inner {
    border: 5px solid yellow;
    display: grid;
    grid-template-rows: 210px minmax(max-content, 3fr) minmax(max-content, 2fr) 30px;
    grid-row-gap: 5px;
    text-align: center;
    margin-right: 1em;
    margin-bottom: 1.5em;
    width: 150px;
    font-size: 1.00em;
    a.image{
      border: 5px solid orange;
      img {
        width: em(160px);
        height: em(210px);
      }
    }
    a.upper-text {
      border: 5px solid red;
      line-height: normal;
    }
   .lower-text {
     border: 5px solid green;
    }
    .price {
      border: 5px solid blue;
      margin:  0;
    }
  }
}

我仍然有兴趣了解如何在不使用表格的情况下仅依赖该行的大部分内容。