When I try to place elements from an array in a list with display flex, the height of other elements gets modified when one is collapsed.
I have attempted different display and inline placement on li elements but nothing has worked so far.
Is there a way to keep elements in a list inline and independent in height?
.dragscroll {
display: flex;
overflow-x: auto;
}
.rectangle-holder {
border: 1px solid black;
}
ul {
list-style-type: none;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col-12">
<ul class="dragscroll">
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment1" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment1">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<!-- More list items here -->
</ul>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>