如何防止上一个弹性项溢出父级

时间：2018-02-07 06:07:47

标签： html css css3 flexbox

我试图弄清楚如何使列表中的最后一个弹性项目不会扩展到容器的底部。它有一个令人满意的div，当有人输入多行文本时我需要扩展它。

主要弹性项目是一列中的3个div，标题栏是100％宽度，内容容器是100％宽度，生长和收缩，页脚是弯曲的，应该导致内部容器缩小。

目前，当您在div.detail-chat-input中输入多行文本时，它会向上展开，但也会按下按钮。

像这样：

Footer buttons overflowing the container

＆＃13;
＆＃13; 
* {
	box-sizing: border-box;
}

.panel-popover-window {
  background-color: grey;
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: column;
}

.panel-popover-title-bar {
  border: 1px solid black;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  position: relative;
}

.panel-popover-content {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 5px;
  min-height: 0;
  overflow-y: scroll;
}

.panel-popover-column-2 {
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
}

.panel-popover-panel {
  border: 1px solid #e0e0e0;
  margin: 5px;
  background-color: #fff;
}

.panel-popover-panel-title {
  display: block;
  border-bottom: 1px solid black;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  position: relative;
}

.panel-popover-footer {
  min-height: 60px;
  padding: 0 10px;
}

.panel-popover-footer-content {
  position: relative;
}

.panel-popover-footer-button-bar {
  width: 100%;
  height: 60px;
}

.panel-popover-close-button {
  border: 1px solid black;
  width: 83px;
  height: 37px;
  float: right;
  margin-top: 15px;
}

.detail-chat-input {
  min-height: 48px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 15px;
  line-height: 30px;
}

.detail-activity-scrollable {
  overflow-y: scroll;
  height: calc(100% - 50px);
}
.detail-message-container {
  min-height: 800px;
}

.panel-popover-panel.activity {
  max-height: 685px;
  overflow-y: hidden;
  position: relative;
}
＆＃13; 
<html>
  <head>
  </head>
  <body>
    <div class="panel-popover-window detail-popover" style="width: 1200px; height: 875px;">
      <div class="panel-popover-title-bar">
        <span class="panel-popover-title-bar-text">Popover Title</span>
        <div class="panel-popover-title-bar-close"></div>
      </div>
      <div class="panel-popover-content">
        <div class="panel-popover-column panel-popover-column-2">
          <div class="panel-popover-panel submission-info">
            <div class="panel-popover-panel-title">Title 1</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
          </div>
          <div class="panel-popover-panel statistics">
            <div class="panel-popover-panel-title">Title 2</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
          </div>
        </div>
        <div class="panel-popover-column panel-popover-column-2">
          <div class="panel-popover-panel activity">
            <div class="panel-popover-panel-title">Title 3</div>
            <div class="detail-activity-scrollable">
              <div class="detail-message-container">
                  <div class="ad-approval-panel-line">Data</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel-popover-footer">
        <div class="panel-popover-footer-content">
          <textarea class="detail-chat-input" placeholder="Send Message" data-emojiable="converted" style="display: none;" data-id="8ff80f0d-85e3-4ac4-acbf-c950fffbc1a4" data-type="original-input"></textarea>
          <div class="emoji-wysiwyg-editor detail-chat-input parent-has-scroll" placeholder="Send Message" contenteditable="true"></div>
          <div class="panel-popover-footer-button-bar">
            <button class="detail-admin-control detail-approve" disabled="">Button 1</button>
            <button class="detail-admin-control detail-disapprove">Button 2</button>
            <div class="panel-popover-close-button">Close</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

将height: 100%;提供给.panel-popover-window容器。

* {
  box-sizing: border-box;
}

.panel-popover-window {
  background-color: grey;
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 1200px; 
  height: 100%;
}

.panel-popover-title-bar {
  border: 1px solid black;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  position: relative;
}

.panel-popover-content {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 5px;
  min-height: 0;
  overflow-y: scroll;
}

.panel-popover-column-2 {
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
}

.panel-popover-panel {
  border: 1px solid #e0e0e0;
  margin: 5px;
  background-color: #fff;
}

.panel-popover-panel-title {
  display: block;
  border-bottom: 1px solid black;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  position: relative;
}

.panel-popover-footer {
  min-height: 60px;
  padding: 0 10px;
}

.panel-popover-footer-content {
  position: relative;
}

.panel-popover-footer-button-bar {
  width: 100%;
  height: 60px;
}

.panel-popover-close-button {
  border: 1px solid black;
  width: 83px;
  height: 37px;
  float: right;
  margin-top: 15px;
}

.detail-chat-input {
  min-height: 48px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 15px;
  line-height: 30px;
}

.detail-activity-scrollable {
  overflow-y: scroll;
  height: calc(100% - 50px);
}
.detail-message-container {
  min-height: 800px;
}

.panel-popover-panel.activity {
  max-height: 685px;
  overflow-y: hidden;
  position: relative;
}
<html>
  <head>
  </head>
  <body>
    <div class="panel-popover-window detail-popover">
      <div class="panel-popover-title-bar">
        <span class="panel-popover-title-bar-text">Popover Title</span>
        <div class="panel-popover-title-bar-close"></div>
      </div>
      <div class="panel-popover-content">
        <div class="panel-popover-column panel-popover-column-2">
          <div class="panel-popover-panel submission-info">
            <div class="panel-popover-panel-title">Title 1</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
          </div>
          <div class="panel-popover-panel statistics">
            <div class="panel-popover-panel-title">Title 2</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
            <div class="ad-approval-panel-line">Data</div>
          </div>
        </div>
        <div class="panel-popover-column panel-popover-column-2">
          <div class="panel-popover-panel activity">
            <div class="panel-popover-panel-title">Title 3</div>
            <div class="detail-activity-scrollable">
              <div class="detail-message-container">
                  <div class="ad-approval-panel-line">Data</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel-popover-footer">
        <div class="panel-popover-footer-content">
          <textarea class="detail-chat-input" placeholder="Send Message" data-emojiable="converted" style="display: none;" data-id="8ff80f0d-85e3-4ac4-acbf-c950fffbc1a4" data-type="original-input"></textarea>
          <div class="emoji-wysiwyg-editor detail-chat-input parent-has-scroll" placeholder="Send Message" contenteditable="true"></div>
          <div class="panel-popover-footer-button-bar">
            <button class="detail-admin-control detail-approve" disabled="">Button 1</button>
            <button class="detail-admin-control detail-disapprove">Button 2</button>
            <div class="panel-popover-close-button">Close</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

相关问题
最新问题