固定父容器高度时，如何不压缩Flexbox弹性列内容？

Question

我正在使用一个使用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/

进行检查

Answer 1

您可以做的一件事是使用flex速记将flex-shrink的所有直接子元素中的chatbox设置为零：

.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>