Элемент гибкого контейнера не соответствует высоте
Нужна помощь с CSS flexbox сегодня. Я считаю, что я правильно настроил flexbox, я хочу, чтобы каждый элемент списка складывался в стек, а затем каждый div в li выполнял space-between и имел вертикальное центрирование содержимого в каждом div. Это нужно для автозаполнения .. Как это на самом деле отображается: (похоже, не соблюдает настройку высоты)
Я создал фрагмент кода, упрощенный код из 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>Вы пробовали не использовать флекс? пожалуйста, создайте проект jsfiddle, который представляет проблему, на которую легче ответить.
добавьте flex-shrink:0 в свой элемент и посмотрите
В конце концов, я просто переделал весь свой CSS и html, чтобы следовать этому подходу с нуля, и это сработало. Спасибо за беспокойство. jsfiddle.net/ga6g4/2
Ответы 1
В конце концов, я просто переделал весь свой CSS и html, чтобы следовать этому подходу, о котором я упоминал в своем последнем комментарии к вопросу.
Спасибо за беспокойство.
Подумайте о том, чтобы опубликовать полный ответ. Самостоятельный ответ более полезен (например, им проще поделиться).
Хорошо, дальнейшее расследование показывает, что я на самом деле динамически устанавливаю maxHeight в зависимости от высоты браузера (мобильного устройства), и это вызывает его повышение. Тем не менее, решения пока нет.