当父容器高度固定时，如何使 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 shorthand:

将 chatbox 的所有直接子元素的 flex-shrink 设置为零

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

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

How to make Flexbox flex-column content not compressed when parent container height is fixed?

html

css

css-position

flexbox