0

I'm exploring flex css and stumble on this problem. I know that align-items: stretch could make the child elements pick the tallest child height and automatically stretch its siblings.

Based on the code below, is it possible to make the component-item stretch or have the same height as the other component-item using css? I need the other component-item to follow the 5 liner description height.

Thanks in advance!

<div class="main-container">
    <div class="component-container">
        <h1>Component Title</h1>
        <div class="component-item">
            3 liner description
        </div>
    </div>

    <div class="component-container">
        <h1>Component Title</h1>
        <div class="component-item">
            5 liner description
        </div>
    </div>

    <div class="component-container">
        <h1>Component Title</h1>
        <div class="component-item">
            4 liner description
        </div>
    </div>
</div>
Wreeecks
  • 2,186
  • 1
  • 33
  • 53
  • Why is this closed? The solution provided doesn't work on IE browser. Maybe this is a good solution in the future when `display:subgrid` is fully supported across the browsers. – Wreeecks May 19 '20 at 23:48
  • from the duplicate : *This is not possible at present (2019/06) with any CSS layout method. display:subgrid solves the issue but it has limited non-experimental adoption by browsers as yet.* <-- Note the : this is not possible – Temani Afif May 20 '20 at 00:06
  • @TemaniAfif definitely not a duplicate. This is using flex box not `display:grid`. Why do you even close the issue when your suggested solution doesn't work. – Wreeecks May 20 '20 at 00:11
  • This is not possible with **any CSS layout method.**. Flexbox, CSS grid, float, inline-block,table, etc all of them are different CSS layout and the only close solution to achieve what you want is CSS grid. – Temani Afif May 20 '20 at 00:14
  • Then don't flag this as duplicate and leave this open. There could be a work around for this and i'm open to suggestions. – Wreeecks May 20 '20 at 00:24

0 Answers0