I have a list of products which I am listing using flexbox. Every flex item has a heading, description and stock status (image too, but it's not necessary in this example).
My problem is that headings and description has different text lengths (See my example).
I used grid layout to set get same height for the headings, which works well. But in some cases the heading has too much height and don't look good (check the orange horizontal line). I use fr unit to calculate the height and it adds too much.
Is there any chance to get same height for headings and description without using fixed height, but not heaving too much height? I need the horizontal line after the heading and I don't need so much empty space between heading and description.
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>
