Как сделать так, чтобы содержимое flex-столбца Flexbox не сжималось при фиксированной высоте родительского контейнера? - PullRequest
Новая
       7

Как сделать так, чтобы содержимое flex-столбца Flexbox не сжималось при фиксированной высоте родительского контейнера?

0 голосов
/ 05 сентября 2018

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

Вот что я попробовал: 

  // I set this container with specific height.
  .page-call-list .msg-content-wrapper{height:500px;overflow-y:visible;}

 .page-call-list .chatbox > div {flex-wrap:nowrap;}

Это конечно отображает полосу прокрутки, но содержимое перепутано. Вы можете проверить это здесь http://jsfiddle.net/mrnLe509/7/

1 Ответ

0 голосов
/ 05 сентября 2018

Одна вещь, которую вы можете сделать, это установить flex-shrink на ноль всех непосредственных дочерних элементов chatbox, используя сокращенную запись flex: 

.chatbox > * {
    flex: 1 0 100%;
}

, а затем добавьте переполнение к chatbox вместо того, чтобы иметь его в msg-content-wrapper - см. Демонстрацию ниже и jsfiddle : 

.page-call-list .msg-content-wrapper {
  width: 65%;
  float: left;
  height: 500px;
  /*overflow-y: auto;*/
  position: relative;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  display: flex;
  flex-direction: column;
}

.page-call-list .recipient-headline {
  display: flex;
  justify-content: space-between;
  padding: 14px 30px;
  background: #fff;
  -webkit-box-shadow: 5px 0px 8px 0px rgba(209, 205, 209, 0.9);
  -moz-box-shadow: 5px 0px 8px 0px rgba(209, 205, 209, 0.9);
  box-shadow: 5px 0px 8px 0px rgba(209, 205, 209, 0.9);
  height: 80px;
}

.page-call-list .recipient-headline .timer {
  display: flex;
  align-items: center;
}

.page-call-list .recipient-headline .timer button {
  font-family: 'Montserrat';
  font-weight: 400;
  font-size: 16px;
  color: #e82b2f;
  border: solid 1px #e82b2f;
  padding: 12px 14px;
}

.page-call-list .recipient-headline .details {
  display: flex;
  align-items: center;
}

.page-call-list .recipient-headline .details .name {
  margin-right: 10px;
}

.page-call-list .recipient-headline .details .name h2 {
  color: #1d232a;
  font-size: 18px;
  font-family: 'Montserrat';
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
}

.page-call-list .recipient-headline .details a {
  font-family: 'Roboto';
  font-size: 12px;
  color: #009ca3;
  position: relative;
  margin-left: 5px;
}

.page-call-list .recipient-headline .details a.phone:before {
  content: url(../img/call-list/phone.png);
  display: inline-block;
  vertical-align: middle;
  margin-top: 4px;
}

.page-call-list .recipient-headline .details a.email:before {
  content: url(../img/call-list/email.png);
  display: inline-block;
  vertical-align: middle;
  margin-top: 4px;
  margin-right: 4px;
}

.page-call-list .chatbox .thumbnail-wrapper.d48 {
  min-width: 48px;
}

.page-call-list .chatbox {
  display: flex;
  flex-direction: column;
  padding: 50px 30px 25px;
  overflow: auto;/* ADDED */
}

.page-call-list .chatbox>div {
  margin-bottom: 20px;
}

.page-call-list .chatbox .recipient {
  display: flex;
}

.page-call-list .chatbox .recipient .msg {
  background: #fff;
  color: #818ca1;
  position: relative;
  margin-left: 15px;
  border-radius: 5px;
  padding: 20px;
  margin-right: 56px;
  font-family: 'Roboto';
  font-weight: 300
}

.page-call-list .chatbox .recipient .msg:after {
  right: 100%;
  top: 28px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.page-call-list .chatbox .sender {
  display: flex;
  justify-content: flex-end;
}

.page-call-list .chatbox .sender .msg {
  background: #54a6de;
  color: #fff;
  position: relative;
  padding: 20px;
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 56px;
  font-family: 'Roboto';
  font-weight: 300
}

.page-call-list .chatbox .sender .msg:after {
  left: 100%;
  top: 28px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(84, 166, 222, 0);
  border-left-color: #54a6de;
  border-width: 6px;
  margin-top: -6px;
}

.page-call-list .chat-input {
  display: flex;
  padding: 0 30px 30px;
}

.page-call-list .chat-input .chat-input--inner {
  display: flex;
  width: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  height: 80px;
}

.page-call-list .chat-input .chat-input--inner .btn {
  border: 0;
  padding: 0;
  border-radius: 0;
}

.page-call-list .chat-input .chat-input--inner .btn:hover {
  background: none;
}

.page-call-list .chat-input .chat-input--inner .btn.btn-chat {
  padding: 0 15px;
  border-right: solid 1px #c3c5c7;
}

.page-call-list .chat-input .chat-input--inner .btn.btn-chat img {
  margin-top: 5px;
}

.page-call-list .chat-input .chat-input--inner form {
  display: flex;
  width: 100%;
}

.page-call-list .chat-input .chat-input--inner form .input-msg {
  width: 100%;
  border: 0;
  font-family: 'Roboto';
  font-size: 15px;
  color: #818ca1;
  padding-left: 15px;
  font-weight: 300
}

.page-call-list .chat-input .chat-input--inner form .input-msg::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #818ca1;
}

.page-call-list .chat-input .chat-input--inner form .input-msg::-moz-placeholder {
  /* Firefox 19+ */
  color: #818ca1;
}

.page-call-list .chat-input .chat-input--inner form .input-msg:-ms-input-placeholder {
  /* IE 10+ */
  color: #818ca1;
}

.page-call-list .chat-input .chat-input--inner form .input-msg:-moz-placeholder {
  /* Firefox 18- */
  color: #818ca1;
}

.page-call-list .chat-input .chat-input--inner form #btn-send {
  background: none;
  border: none;
  cursor: pointer;
}

/* ADDED THIS */
.chatbox > * {
    flex: 1 0 100%;
}
<div class="page-call-list">

  <div class="msg-content-wrapper">
    <div class="recipient-headline">
      <div class="timer">
        <button type="button" class="btn btn-default">
                                      -00:23 <span class="fa fa-pause"></span>
                                    </button>
      </div>
      <div class="details">
        <div class="name text-right">
          <h2>Mark Zuckerberg</h2>
          <a href="tel:0123456789;" class="phone">0123 456 789</a>
          <a href="mailto:markz@gmail.com" class="email">markz@gmail.com</a>
        </div>
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
      </div>
    </div>
    <div class="chatbox">
      <div class="recipient">
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
        <div class="msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
      </div>
      <div class="sender">
        <div class="msg">Duis aute irure dolor in reprehenderit in.</div>
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
      </div>
      <div class="recipient">
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
        <div class="msg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volupta quia
          voluptas sit aspernatur aut odit aut fugit.</div>
      </div>
      <div class="sender">
        <div class="msg">Neque porro quisquam est, qui dolorem ipsumuia.</div>
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
      </div>
      <div class="recipient">
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
        <div class="msg">Ut enim ad minima veniam, quis.</div>
      </div>
      <div class="sender">
        <div class="msg">Duis aute irure dolor in reprehenderit in tate.</div>
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
      </div>
      <div class="recipient">
        <div class="thumbnail-wrapper d48 circular"><img width="40" height="40" alt="" src="https://s22.postimg.cc/q5qm4piu9/avatar.png"></div>
        <div class="msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
      </div>
    </div>
    <div class="chat-input">
      <div class="chat-input--inner">

        <button class="btn btn-vid"><img src="https://localhost/2.0/public/assets/img/call-list/video.png" alt=""></button>
        <button class="btn btn-chat"><img src="https://localhost/2.0/public/assets/img/call-list/chat.png" alt=""></button>
        <form action="#">
          <input class="input-msg" type="text" name="message" placeholder="Type your message...">
          <button type="submit" id="btn-send"><img width="40" height="40" alt="" src="https://localhost/2.0/public/assets/img/call-list/btn-send.png"></button>
        </form>

      </div>
    </div>
  </div>
</div>
...