Сохранение высоты гибкого элемента при изменении высоты элементов в одном ряду с помощью align-item: stretch - PullRequest
Новая
       8

Сохранение высоты гибкого элемента при изменении высоты элементов в одном ряду с помощью align-item: stretch

0 голосов
/ 09 апреля 2020

Я использую Bootstrap 4.4.1 и Jquery 3.4.1.

У меня есть список флекс-элементов, обертывающих вокруг флекс-контейнера, определяемый как: 

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

Каждый Сгибаемый элемент имеет класс .tile-rtiers css и имеет переменную высоту 

.tile-rtiers {
  border: 1px solid #CCCCCC;
  padding: 5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  margin: 5px 20px;
  min-height: 100px;
  width: 300px;
}

Эти сгибаемые элементы представляют собой карты, в которых есть разборные list-group из Bootstrap внутри. В этом списке есть переменное число элементов. 

<div class="tile-rtiers">
                <div class="info-rtiers">
                    <ul class="list-group">
                        <li data-toggle="collapse" data-target="#collapse-item-1-0" aria-expanded="false" aria-controls="collapse-item-1" id="collapse-pa-1-0" class="gras cursor-hover list-group-item">
                            LIST 3                  <p id="collapse-item-1-0" class="collapse">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod placerat ultricies. Integer at sem interdum, eleifend tellus a, viverra velit. Vivamus ultrices efficitur tempus. Duis placerat condimentum enim, ac condimentum nisl cursus faucibus. Donec pretium lectus in pellentesque convallis. Donec interdum nisi vitae mollis porta. Nunc maximus lacinia felis at auctor. Vivamus eleifend porttitor tortor ut molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis posuere risus. Praesent id dolor diam. 
                            </p>
                        </li>
                        <li data-toggle="collapse" data-target="#collapse-item-1-1" aria-expanded="false" aria-controls="collapse-item-1" id="collapse-pa-1-1" class="gras cursor-hover list-group-item">
                            LIST 4                  <p id="collapse-item-1-1" class="collapse">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod placerat ultricies. Integer at sem interdum, eleifend tellus a, viverra velit. Vivamus ultrices efficitur tempus. Duis placerat condimentum enim, ac condimentum nisl cursus faucibus. Donec pretium lectus in pellentesque convallis. Donec interdum nisi vitae mollis porta. Nunc maximus lacinia felis at auctor. Vivamus eleifend porttitor tortor ut molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis posuere risus. Praesent id dolor diam. 
                            </p>
                        </li>
                        <li data-toggle="collapse" data-target="#collapse-item-1-2" aria-expanded="false" aria-controls="collapse-item-1" id="collapse-pa-1-2" class="gras cursor-hover list-group-item collapsed">
                            LIST 5                  <p id="collapse-item-1-2" class="collapse" style="">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod placerat ultricies. Integer at sem interdum, eleifend tellus a, viverra velit. Vivamus ultrices efficitur tempus. Duis placerat condimentum enim, ac condimentum nisl cursus faucibus. Donec pretium lectus in pellentesque convallis. Donec interdum nisi vitae mollis porta. Nunc maximus lacinia felis at auctor. Vivamus eleifend porttitor tortor ut molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis posuere risus. Praesent id dolor diam. 
                            </p>
                        </li>
                    </ul>
                </div>
            </div>

Моя проблема в том, что когда я расширяю элементы, расширяющийся гибкий элемент изменяет его высоту. Таким образом, все остальные элементы в той же строке растягиваются из-за свойства align-items: stretch. Я бы хотел, чтобы они сохранили свою высоту, имея вид align-items: stretch, когда ничего не развернуто (элементы имеют высоту самого высокого элемента строки).

Я попытался установить align-self: stretch в гибкие элементы, но результат все тот же.

Вот фрагмент кода задачи https://codepen.io/Idaan/pen/jObOBqb

Спасибо

...