我有一个使用flexbox列出的产品列表。每个弹性项目都有一个标题、描述和库存状态(图片也是，但在本例中没有必要(。
我的问题是标题和描述有不同的文本长度(参见我的示例(。
我使用网格布局为标题设置相同的高度，效果很好。但在某些情况下，标题高度过大，看起来不太好(检查橙色水平线(。我使用fr单位来计算高度，它增加了太多。
是否有机会在不使用固定高度的情况下，获得相同的标题和描述高度，但不要起伏太大的高度？我需要标题后面的水平线，标题和描述之间不需要太多空白。
body {
font: 80% 'Roboto Slab',serif;
font-weight: normal;
font-size: 80%;
line-height: normal;
color: #000;
}
h2 {
}
.categories, .main-products, .related-products {
width:960px;
margin:0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.category, .product {
display: flex;
flex-direction: column;
width: 31%;
margin: 0 20px 20px 0;
background-color:
#EDE6D9;
text-align: center;
justify-content: flex-start;
flex: 1 0 auto;
position:relative;
}
.product-tags {
position: absolute;
right: -8px;
top: 10px;
}
.category-image, .product-image {
display: block;
background-color:
#FFF;
height: 160px;
vertical-align: middle;
overflow: hidden;
margin-bottom: 15px;
}
.product-middle {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr 1.5fr auto;
}
.category h1, .category h2, .product h1, .product h2 {
color:
#3A2923;
font-weight: 700;
text-transform: none;
font-size: 160%;
margin: 0 0 30px;
position: relative;
}
.stock_status {
text-align: center;
margin-bottom: 0;
font-size: 85%;
margin-top: 20px;
}
.product .product-middle div.perex_overview {
margin: 0;
line-height: 1.4em;
text-align: justify;
}
.category-middle, .product-middle {
padding: 0 30px 20px;
flex: 1 0 auto;
}
.product-heading-line {
position: absolute;
bottom: -16px;
width: 100%;
height: 100%;
background: url(https://www.optimtop.cz/web/resources/images/product_sep.png) center bottom no-repeat;
}
.product > div:not(.product-middle) {
font-size:2em;
margin:20px 0;
}<html>
<head>
<title>My Example</title>
</head>
<body>
<div class="main-products">
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-mix-premium-400-kg/" title="Dřevěné válcové brikety MIX PREMIUM, 400 kg">
Dřevěné válcové brikety<br>MIX PREMIUM,<br>400 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Dřevěné válcové brikety </span><strong>MIX PREMIUM</strong><span><span> </span>jsou charakteristické extrémním slisováním, které v kombinaci s velmi kvalitní dřevní hmotou prodlužují briketám dobu hoření a žhnutí na maximum. </span></p> > <a href="/drevene-valcove-brikety-mix-premium-400-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-hard-top-dub-buk-720-kg/" title="Dřevěné válcové brikety HARD TOP, dub/buk, 720 kg">
Dřevěné válcové brikety HARD TOP, dub/buk,<br>720 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné brikety <strong>RUF HARD SPECIAL</strong> jsou vyrobené ze speciální, velmi kvalitní dřevěné hmoty složené z tvrdých dřevin (dub, buk, habr jasan). <span style="color: #0000ff;">Před dodáním briket RUF HARD SPECIAL telefonicky kontaktujeme zákazníka, z důvodu případné drobné změny hmotnosti briket na paletě. Cena 5,80 Kč za 1 kg briket se však nemění.</span> </p> > <a href="/drevene-brikety-ruf-hard-special-750-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-mix-extra-720-kg/" title="Dřevěné válcové brikety MIX EXTRA, 720 kg">
Dřevěné válcové brikety MIX EXTRA,<br>720 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Válcové brikety <strong>MIX EXTRA</strong> jsou lisovány na moderním mechanickém lisu pod vextrémním tlakem až 2 500 kg/cm</span><sup>2</sup><span>.</span></p> > <a href="/drevene-valcove-brikety-mix-extra-720-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-extra-power-s-dirou-840-kg/" title="Dřevěné válcové brikety EXTRA POWER s dírou, 840 kg">
Dřevěné válcové brikety<br>EXTRA POWER s dírou,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné válcové brikety <strong>EXTRA POWER s dírou</strong> jsou vyráběny z čistých a suchých dubových pilin, do kterých je přimíchané menší množství borovicových pilin.</p> > <a href="/drevene-valcove-brikety-extra-power-s-dirou-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-puk-hard-top-500-kg/" title="Dřevěné válcové brikety PUK HARD TOP, 500 kg">
Dřevěné válcové brikety PUK HARD TOP,<br>500 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné válcové brikety <strong>PUK HARD TOP</strong> jsou vyrobeny ze suchých čistých pilin velmi kvalitní dřevní hmoty z tvrdých listnatých dřevin: dub, buk, habr jasan.</p> > <a href="/drevene-valcove-brikety-puk-hard-top-500-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/nocni-brikety-kurove-premium-816-kg/" title="Noční brikety kůrové PREMIUM, 816 kg">
Noční brikety kůrové PREMIUM,<br>816 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span><strong>Noční kůrové</strong> brikety <strong>PREMIUM</strong> jsou charakteristické extrémním slisováním a výrazně prodlouženou dobou hoření a žhnutí, až 6 - 8 hodin.</span></p> > <a href="/nocni-brikety-kurove-premium-816-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-hard-top-840-kg/" title="Dřevěné brikety RUF HARD TOP, 840 kg">
Dřevěné brikety<br>RUF HARD TOP,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné brikety<strong> RUF HARD TOP</strong> jsou vyráběné moderní technologií ze suchých čistých hoblin a pilin tvrdého, bukového a habrového dřeva.</p> > <a href="/drevene-brikety-ruf-hard-top-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-hard-mix-dub-buk-816-kg/" title="Dřevěné brikety RUF HARD MIX, dub/buk, 816 kg">
Dřevěné brikety<br>RUF HARD MIX, dub/buk,<br>816 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Brikety nejvyšší kvality <strong>RUF HARD MIX</strong> jsou vyráběny ze směsi tvrdých dřevin (dub/buk). </span></p> > <a href="/drevene-brikety-ruf-hard-mix-dub-buk-816-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-excellent-840-kg/" title="Dřevěné brikety RUF MIX EXCELLENT, 840 kg">
Dřevěné brikety<br>RUF MIX EXCELLENT,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné brikety <strong>RUF MIX EXCELLENT</strong> jsou vyráběné z výběrová dřevní hmota, převážně tvořené z tvrdého dřeva,které v kombinaci s extrémním stlačením, garantuje vysokou výhřevnost a dlouhou dobu hoření a žhnutí briket.</p> > <a href="/drevene-brikety-ruf-mix-excellent-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-extra-840-kg/" title="Dřevěné brikety RUF MIX EXTRA, 840 kg">
Dřevěné brikety<br>RUF MIX EXTRA,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p style="text-align: justify;">Dřevěné brikety <strong>RUF MIX EXTRA</strong> jsou charakteristické velmi kvalitním slisováním na moderní německé technologické lince. <span style="color: #0000ff;">Dárek zdarma - pytel podpalovacích třísek.</span></p> > <a href="/drevene-brikety-ruf-mix-extra-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-excellent-420-kg/" title="Dřevěné brikety RUF MIX EXCELLENT, 420 kg">
Dřevěné brikety<br>RUF MIX EXCELLENT,<br>420 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Dřevěné brikety </span><strong>RUF MIX EXCELLENT</strong><span><span> </span>jsou vyráběné z výběrové dřevní hmoty na moderní technologické lince.<span style="color: #008080;"> </span></span><span style="color: #008000;"><strong>Dárek zdarma – zátopové třísky ze suchého dřeva (3kg)</strong></span></p> > <a href="/drevene-brikety-ruf-mix-excellent-420-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-hard-extra-dubove-460-kg/" title="Dřevěné válcové brikety HARD EXTRA, dubové, 460 kg">
Dřevěné válcové brikety<br>HARD EXTRA, dubové,<br>460 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Dřevěné válcové brikety nejvyšší jakosti se vyznačují extrémním slisováním, které v kombinaci s jemnou frakcí velmi kvalitní dřevní hmoty (100% dub), prodlužují briketám dobu hoření a žhnutí na maximum. Prémiové válcové brikety HARD EXTRA jsou určené pro celodenní intenzivní topení a lze s nimi topit v kamnech, kotlech s ručním přikládáním a uzavřených i otevřených krbech.</span></p> > <a href="/drevene-valcove-brikety-hard-extra-dubove-460-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/nocni-valcove-brikety-kurove-max-10-kg/" title="Noční válcové brikety kůrové MAX, 10 kg">
Noční válcové brikety<br> kůrové MAX,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Noční kůrové</strong><span><span> </span>válcové brikety<span> </span></span><strong>MAX</strong><span><span> </span>jsou charakteristické extrémním slisováním a především maximální dobou hoření. </span></p> > <a href="/nocni-valcove-brikety-kurove-max-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-mix-premium-10-kg/" title="Dřevěné válcové brikety MIX PREMIUM, 10 kg">
Dřevěné válcové brikety<br>MIX PREMIUM,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných válcových briket MIX PREMIUM je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/drevene-valcove-brikety-mix-premium-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/nocni-brikety-kurove-premium-8-kg/" title="Noční brikety kůrové PREMIUM, 8 kg">
Noční brikety kůrové PREMIUM,<br>8 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> nočních kůrových briket PREMIUM je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/nocni-brikety-kurove-premium-8-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-excellent-10-kg/" title="Dřevěné brikety RUF MIX EXCELLENT, 10 kg">
Dřevěné brikety<br>RUF MIX EXCELLENT,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných briket RUF MIX EXCELLENT je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/drevene-brikety-ruf-mix-excellent-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-extra-10-kg/" title="Dřevěné brikety RUF MIX EXTRA, 10 kg">
Dřevěné brikety<br>RUF MIX EXTRA,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných briket RUF MIX EXTRA je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy. </p> > <a href="/drevene-brikety-ruf-mix-extra-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-top-dub-buk-10-kg/" title="Dřevěné brikety RUF MIX TOP, dub/buk, 10 kg">
Dřevěné brikety<br>RUF MIX TOP,<br>dub/buk,<br> 10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných briket RUF MIX TOP je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/drevene-brikety-ruf-mix-top-dub-buk-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
</div>
</body>
</html>如果你想让所有的标题都有相同的高度，你就不想让它变得灵活，我建议你使用flex元素作为它们的原始范围。如果标题文本的长度是可变的，那么所有卡片的文本和下边框之间就不能有固定的高度和相同的间距。。。在您的情况下，我只需将网格模板行的第一个值设置为"自动"：
.product-middle
{
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1.5fr auto;
}