In order to display multiple lists side by side, I have two main objectives:
- I want the scroll to be synchronized across these lists. This means that when I view an item in one list, I should easily be able to see the corresponding item in the other lists. Achieving this synchronization should be straightforward if I can address the second goal successfully.
- I need to ensure that each row in all the lists has the same height. For example: if the second element in all the lists is a phrase and it fits in one row in the first list but three rows in the second list, I want to make sure that even in the first list the space allocated for that item is three rows tall. This will facilitate sync scrolling and comparison of values.
The structure of my lists is quite simple, as shown below:
<div class="container">
<h3>
Conflicted Version Item
</h3>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
<h6>Bla bla bla</h6>
</div>
//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%;
}
Here is how the list container should look:
<div class="conflicted-versions">
<app-conflicted-version-item></app-conflicted-version-item>
<app-conflicted-version-item></app-conflicted-version-item>
<app-conflicted-version-item></app-conflicted-version-item>
...
</div>
//css
.conflicted-versions{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
max-height: 30vh;
}
Note that app-conflicted-version-item represents the list described in the first code snippet.
I am seeking recommendations to tackle the second challenge, as I believe I can handle the first one once the second issue is resolved.