Flexbox не расширяется с контентом - PullRequest
Новая
       7

Flexbox не расширяется с контентом

0 голосов
/ 02 июля 2018

Я пытаюсь создать базовый вид мессенджера на экране мобильного телефона. Таким образом, в верхней части есть заголовок, прокручиваемый список сообщений в середине и полоса внизу с текстовой областью и кнопкой для отправки нового сообщения.

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

Рабочий образец здесь: https://codepen.io/jwynveen/pen/RJdWLB?editors=1100#0

enter image description here

#container {
  width: 412px;
  height: 660px;
  border: solid 2px black;
  display: flex;
  flex-direction: column;
}
#container h1 {
  border-bottom: solid 1px gray;
  margin-bottom: 0;
  padding: 1rem;
}
#container #message-list {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: scroll;
}
#container #message-list .message {
  margin: 1rem;
  padding: 1rem;
  border: solid 1px gray;
}
#container #message-input-bar {
  display: block;
}
#container #message-input {
  padding: 1rem;
  display: flex;
  border-top: solid 2px red;
}
#container #message-input textarea {
  flex-grow: 1;
}
<html>
<div id="container">
  <h1>My Header</h1>
  <div id="message-list">
    <div class="message">This is a dummy message.</div>
    <div class="message">This is a dummy message.</div>
  </div>
  <div id="message-input">
    <textarea style="height: 100px"></textarea>
    <button id="send">Send</button>
  </div>
</div>
</html>

Если в центральной области нет сообщений, текстовое поле расширяет свой контейнер, как и ожидалось. Но как только в центральной области достаточно прокрутки, текстовое поле начинает переполняться.

Ответы [ 3 ]

0 голосов
/ 02 июля 2018

Раствор 1

Вы применили ручную высоту к контейнеру. поэтому он останавливается там после достижения этой конкретной высоты.

Вместо этого примените height: auto;, чтобы контейнер мог расширяться согласно содержимому

Посмотреть этот код ручки - https://codepen.io/vaishalik3/pen/QxoyMd?editors=1100#0

Раствор 2 - Если вам нужна полоса прокрутки как есть.

  • Применить display: block; вместо flex до #message-input
  • width: 100%; или в соответствии с вашими потребностями textarea

См. Этот код - https://codepen.io/vaishalik3/pen/ERMPLd?editors=1100#0

Решение 3

  • Применить display: grid; к .container
  • display: flex; до #message-input

См. Этот код ручки - https://codepen.io/vaishalik3/pen/RJdqzq?editors=1100#0

Надеюсь, это поможет:)

0 голосов
/ 02 июля 2018

Нашли исправление, основанное на предложении @ vaishali-kapadia. Я обернул # message-input другим div, так что добавленный div равен display:block, а существующий поддерживает макет flexbox.

Изменено с: 

<div id="message-input">
  <textarea style="height: 100px"></textarea>
  <button id="send">Send</button>
</div>

Кому: 

<div id="message-input-bar">
  <div id="message-input">
    <textarea style="height: 100px"></textarea>
    <button id="send">Send</button>
  </div>
</div>

С добавленным CSS (хотя не обязательно, так как div по умолчанию display:block): 

#message-input-bar {
  display:block;
}
0 голосов
/ 02 июля 2018

Удалить 

style="height: 100px"

от вашей текстовой области и укажите высоту: 100% к CSS.

https://codepen.io/anon/pen/ZRPQBX?editors=1100#0

...