html - Nested div element overflowing flex container

Question

Welcome To Ask or Share your Answers For Others

html - Nested div element overflowing flex container

asked Feb 19, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Nested div element overflowing flex container

I have this html page:

    <div class="header"></div>

        <div id="content-meta-wrapper">
            <div id="content">
               <!-- with several nested divs -->            
            </div>
            
            <div id="bookmarks">
                <!-- with some anchor elements -->
            </div>

        </div>

        <div class="footer">    
        </div> 

        
    </div>

With the following css style:

#flex-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.header {
    flex: 0 1 auto;
    order: 1;
}

@media (min-width: 800px) {
  #content-meta-wrapper {
      flex-wrap: wrap;
      flex-direction: row;
  }
}

#content-meta-wrapper {
    order: 2;
    display: flex;
    flex: 1 1 auto;
}

@media screen and (max-width: 799px) {
  #content-meta-wrapper {
      flex-direction: column;
  }
}


.footer {
    order: 3;
    width: 100%;
    flex: 0 1 auto;
}

#content {
    width: 73%;
    flex: 1 1 auto;
    order: 1;
    overflow: auto;
}

#bookmarks {
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: scroll;
    width: 20%;
    order: 2;
}

Since #content has a lot of divs and p nested, its height is really high and it's overflowing the parent div (#content-meta-wrapper). I've tried with overflow: hidden, auto and scroll. I've tried also with min-height. What I'm trying to achive is that #flex-container occupies 100% of the screen (100vh), and all of its children are visible on the viewport. I want #content-meta-wrapper to occupy most of the screen, but without giving it a fixed height. Especially, I'd like #content to not overflow #content-meta-wrapper without giving it a fixed height (for responsiveness purposes), so that the user can scroll only within the #content div, without having to scroll the whole page. Is it possible to achieve this?

#flex-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.header {
    flex: 0 1 auto;
    order: 1;
}

@media (min-width: 800px) {
  #content-meta-wrapper {
      flex-wrap: wrap;
      flex-direction: row;
  }
}

#content-meta-wrapper {
    order: 2;
    display: flex;
    flex: 1 1 auto;
}

@media screen and (max-width: 799px) {
  #content-meta-wrapper {
      flex-direction: column;
  }
}


.footer {
    order: 3;
    width: 100%;
    flex: 0 1 auto;
}

#content {
    width: 73%;
    flex: 1 1 auto;
    order: 1;
    overflow: auto;
}

#bookmarks {
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: scroll;
    width: 20%;
    order: 2;
}

<body>
        
    <div id="flex-container">

        <div class="header">menu</div>

            <div id="content-meta-wrapper">
                <div id="content">
                   <div>content</div>   
                   <div>content</div>   
                   <div>veeery long content</div>
                   <div>content</div>   
                   <div>content</div>   
                   <div>veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long conten, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content, veeery long content</div>
                </div>
                
                <div id="bookmarks">
                    <a>bookmark no. 1</a>
                    <a>bookmark no. 2</a>
                    <a>bookmark no. 3</a>
                </div>

            </div>

            <div class="footer"> a simple footer </div> 

            
        </div>  

</body>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

Categories

html - Nested div element overflowing flex container

html - Nested div element overflowing flex container

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags