Попытка сделать высоту div на основе максимального содержимого с помощью flexbox и размера шрифта css разрушает flex: auto

Question

У меня есть flex-контейнер с несколькими flex-элементами, 2 из которых мне нужно согнуть, разрастаясь на основе текста, чтобы все делители разделялись одинаково.

Мне удалось сделать это следующим образом:

<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;
    }
  }
}

Мой верхний и нижний текст должны быть разных размеров.Когда я помещаю размер шрифта в один из этих классов, я теряю весь растущий флекс.

Вы можете примерить мой кодовый блок https://codepen.io/mxdavis/pen/KxxmKE, вставив font-size: 20px; между строками 24 и 25 (в классе a.upper-text), и вы увидите, что красная граница больше не заканчивается в той же точке, как это происходит, когда шрифт не настроен.https://codepen.io/mxdavis/pen/dqqzMy

Мне нужны коробки четного размера и настроенный размер шрифта.Похоже, что Flex - это самый простой маршрут, так как верхний и нижний текст не могут быть предсказаны.

Любой совет очень важен.

Спасибо!

Обновление: теперь я понимаюесли я играю с размерами текста и не делаю верхний и нижний тексты равными, даже мой первый фрагмент кода не работает, возможно, поэтому увеличение шрифта отбрасывает его.Есть ли способ сделать это или я должен просто установить фиксированную высоту, а затем нажать, чтобы узнать больше?https://codepen.io/mxdavis/pen/KxxedE

Answer 1

Я смог сделать это (по большей части), используя flex и grid вместе.

Мне все еще нужно угадать максимальную строку шаблона для непредсказуемого текста, но по крайней мере я могу гарантировать отправные точки с этим.

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

Вот новый css с .inner, теперь использующий 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;
    }
  }
}

Мне все еще было бы интересно узнать, как полагаться ТОЛЬКО на большую часть контента для этой строки без использования таблиц.