Flex子元素超出父容器元素，并具有溢出滚动

Question

How can I get the main-content to shrink from the right rather than going behind the sidebar? Not sure flexbox is needed for what I'm trying to do but it's almost working..

https://codepen.io/anon/pen/qJJeMr

 html, body { margin: 0; } .container { position: fixed; height: 100%; width: 100%; } .row { height: 100%; display: flex; } .main-content { background: white; height: 100%; flex: auto; display: flex; justify-content: center; align-items: center; white-space: nowrap; overflow-x: auto; } .main-content .content { background: lightgreen; padding: 10px; margin: 10px; height: 300px; display: flex; min-width: 720px; } .sidebar { background: #f2f2f2; height: 100%; width: 700px; flex: none; display: flex; } .sidebar .side-menu-bar { height: 100%; width: 80px; background: lightcyan; flex: none; } 

 <div class="container"> <div class="row"> <div class="sidebar"> <div class="side-menu-bar"></div> <div class="side-content-panel"></div> </div> <div class="main-content"> In main container, outside main content... <div class="content"> This is the main content. </div> </div> </div> </div> 

Answer 1

It's not shrinking as you want, and overlapping its sibling element, because it has a fixed minimum width.

.main-content .content {
    background: lightgreen;
    padding: 10px;
    margin: 10px;
    height: 300px;
    display: flex;
    min-width: 720px; <----- HERE
}

Answer 2

The main content on the right is not shrinking since you have given a min-width:720px; for .content , Once you remove that, your issue will be fixed.