Нужна помощь с CSS flexbox сегодня.Я считаю, что я настроил flexbox правильно, я хочу, чтобы каждый элемент списка складывался, а затем каждый div в li выполнял space-between и центрировал содержимое по вертикали в каждом div.Это служит для автозаполнения. Как это на самом деле отображается, хотя: (не похоже на соблюдение настройки высоты)
Iсоздали фрагмент кода, упрощенный код из angular.io для примера.Фрагмент изолированного кода работает нормально!Ребята, вы видите что-нибудь еще, что может вызвать проблемы?
ul.search-result {
margin-top: 4px;
padding-left: 0;
outline: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
position: absolute;
background: white;
z-index: 99;
display: none;
//width: 355px;
//height: 300px;
overflow: auto;
display: flex;
flex-direction: column;
}
li {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 60px;//60px;
padding: 10px;
background-color: #E9EDEF;
cursor: pointer;
list-style-type: none;
border: solid 1px red;
}
<ul class="search-result" style="width:500px;max-height:500px;">
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
</ul>