title: How to keep multiple lists with different item lengths to have the same height
body: <p>I want to have multiple lists, side by side, and I want to achieve 2 goals:</p>
  <ol>
  <li>is to sync the scroll between these lists, so when I m looking at a certain item from one list, to be able to easily check the same item from the other lists, but this is fairly easy to achieve if I get point 2 to work.</li>
  <li>is to make sure that a certain row from the lists have the same height, for example:
  second element in all lists is a phrase, in the first list the phrase fits in one row, in the second list the phrase fits in 3 rows, the goal is to be sure that even though on the first list the phrase would fit in one row, to make the space for that item 3 rows tall, so that is easy to implement sync scrolling and to check other values.</li>
  </ol>
  <p>My lists are simple components like this:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;h3&gt;
      Conflicted Version Item
    &lt;/h3&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
    &lt;h6&gt;Bla bla bla&lt;/h6&gt;
  &lt;/div&gt;
  
  //css
  
  .container{
    max-width: 25vw;
    min-width: 18vw;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 0;
    flex-basis: 33.333%;
    flex-grow: 0;
    flex-shrink: 0;
    overflow-y: scroll;
    max-height: 90%;
  }
  </code></pre>
  <p>width the list container looking like:</p>
  <pre><code>&lt;div class=&quot;conflicted-versions&quot;&gt;
      &lt;app-conflicted-version-item&gt;&lt;/app-conflicted-version-item&gt;
      &lt;app-conflicted-version-item&gt;&lt;/app-conflicted-version-item&gt;
      &lt;app-conflicted-version-item&gt;&lt;/app-conflicted-version-item&gt;
      ...
    &lt;/div&gt;
  
  //css
  .conflicted-versions{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      max-height: 30vh;
    }
  </code></pre>
  <p>With the remark that app-conflicted-version-item is the list described in the first code snippet.</p>
  <p>I would love some suggestions to solve the second issue, because I m fairly comfortable to do the first on myself if I get the second one right.</p>