当父容器高度固定时，如何使 Flexbox flex-column 内容不被压缩？

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%;
}

然后将 overflow 添加到 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>