Как отключить столбцы с одинаковой высотой в Flexbox?

У меня есть три элемента, которые я пытаюсь выровнять в своем макете.

Во-первых, у меня есть div для обратной связи, а затем вход для поиска, а затем элемент div для предложений.

Я хочу, чтобы первый и последний элементы имели ширину 20%, а вход поиска - шириной 60%. Используя Flexbox, я достигаю того, что хочу.

Но есть функция, которая увеличивает все divs до самого высокого элемента. Это означает, что при появлении результатов поиска элементы обратной связи и предложения растут в высоту с помощью поискового div, что приводит к испорченной компоновке.

Есть ли трюк, чтобы не развить divs с самым высоким элементом? Просто сделайте divs (#feedback и #suggestions) высотой содержимого в них?

Ответы

Ответ 1

Вы столкнулись с функцией столбцов с одинаковой высотой гибки.

Исходная настройка контейнера flex составляет align-items: stretch.

Это означает, что элементы гибки автоматически расширяют всю длину поперечной оси контейнера. В контейнере с вертикальным направлением поперечная ось вертикальна (высота).

Самый высокий элемент устанавливает высоту для всех братьев и сестер. Поскольку самый высокий предмет расширяется, его братья и сестры следуют за ним. Следовательно, равная высота для всех элементов.

Чтобы переопределить эту настройку по умолчанию, добавьте align-items: flex-start в контейнер flex:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}

#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

Ответ 2

Вы можете добавить align-items: flex-start в свой #container_add_movies. Здесь пример

Ответ 3

Установка дочернего элемента, который вызывал проблему, чтобы flex:none не помог мне.

Ответ 4

Да, есть. Вы можете сделать это:

#container_add_movies
  display: flex

  #feedback
    width: 20%
    background-color: green
    display: table

  #search
    width: 60%
    background-color: red

  #suggestions
    width: 20%
    background-color: yellow
    display: table

Как вы можете видеть, я добавил display: table к этим двум div, чтобы это работало.

Вы можете проверить это здесь: http://codepen.io/anon/pen/Zbyxxr