Mindaugas Jačionis Mindaugas Jačionis - 1 month ago 9
CSS Question

dynamical height of article tag

Have trouble dynamically adjusting content blocks, their height in particular.
have code structure(don't mind if missed any closing tags or etc., they are there in running version):

<div class="wrapper">
<article>
<div class="inner-wrap">
<div class="front_panel">
<a>some content(might involve image)</a>
</div>
<div class="back_panel">
<a>some more content</a>
</div>
</div>
<div class="outer-wrap">
<a>some more content</a>
<a>some bottom content</a>
</div>
</article>
.....
<!--more articles here-->
<article>..</article>
</div>


So issue, sometimes some of content is to long so it overflows my default height of 265px. I would like to make it more dynamical and make height adapt, but as all articles need to align according to design guidelines, the height of all articles need to be the same, in other words, if I dynamically adjust height from 265px to 280px on one article it should be the same height on all other. I was thinking about some js checks, but as there is a lot events(filters, searches and etc., everything is asynchronous it is a lot to cover with js).

Any ideas on CSS solutions?
Looked into flexbox CSS solution, but it doesn't seem to adapt good on so many layers of content in article.
Any suggestions, possible solutions or links would help a lot.
Thanks in forward!

Answer

Enclose the articles in divs and then use flex box. Then use the flex-box-grow and flex-box-shrink properties on the items