How can I prevent last flex item from overflowing parent
Question
I'm trying to figure out how to make the last flex item in my list not expand past the bottom of the container. It has a contenteditable div in it that I need to expand up when someone enters more than one line of text.
The main flex items are 3 divs in a column, the title bar is 100% width, the content container is 100% width with grow and shrink and the footer is flex and should cause the inner container to shrink.
Currently when you enter more than one line of text in div.detail-chat-input it does expand upwards, but it also pushes the buttons down.
Like this:
* { 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; }
<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>
1 answers
solution1
1 ACCPTED 2018-02-07 07:04:45
Give a height: 100%; to the .panel-popover-window container.
* { 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to prevent flex-items from overflowing flex parent with no wrap?
Prevent flex item from overflowing flex container
How can I make a flex item's height expand with the content and stop it from overflowing?
How do I stop my last grid item from overflowing?
How to prevent a flex item from overflowing its container when there's a table inside
How to prevent image overflowing flex-grow-1 item?
How to stop flex item overflowing outside parent when height is 100%
How can I prevent a Dropdown from overflowing from the screen?
How can I prevent a grid layout div from overflowing the viewport?
How can I prevent text from overflowing out of the container?
Related Tags