Search code examples
cssflexboxcss-selectors

css flexbox element behaves line inline element (child overflows parent)

A section (with class attribute top-level-section) that has css property display set to flex behaves like an inline element: om padding the child it overflows the parent (div with id main).

Any ideas why this happens and how to solve?

https://jsfiddle.net/ruud00000/qd6c3nrb/1/

CSS:

html {
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
input, textarea, button {
    padding: 10px 17px;
}
html, body, section, footer, div, input, textarea, button {
    font-family: 'DM Sans',sans-serif;
    font-size: large;
}
html, body, section, footer, div {
    border-width: thin;
}
button {
    background-color: chocolate;
    margin: auto;
    display: flex;
    border: none;
    color: white;
}
body {
    display: flex;
    flex-direction: column;
    border-color: rgb(0, 0, 0);
    margin:0px;
    width: 100%;
    align-items: center;
}
section {
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-color: grey;
    margin:1px;
    padding: 20px;
    }
.top-level-section {
    width: 95%;
    /*padding: 20px;*/
    }
@media (max-width: 1280px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
    html {
        width: 100%;
    }
}
div {
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.301);
    margin:1px;           
}
footer {
    display: flex;
    flex-direction: column;
    border-style: dashed;
    border-color: grey;
    margin:1px;           
}
h1 {
    font-size: xxx-large;
}
h2 {
    font-size: xx-large;
    color: grey;
}
h3 {
    font-size: x-large;
    color: rgba(128, 128, 128, 0.301);
}
p {
    font-size: large;
}
h1, h2, h3, p, button {
    display: inline-block;            
}
#navbar {
    position: fixed;
    top:0px;
    height: 50px;
    width: 100%;
    background-color: white;
    display: flex;
    border-style: none; 
    margin: 0px; 
    align-items: center;
    justify-content: space-around;
}
#navbar-pages {
    padding:1px;
}
#navbar div {
    margin: 0px;
    border-style:none; 
}
#main {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#alleclubs, #ikwilkennismaken, #allelocaties, #meeroverkegelen, #interesse {
    display: none;
}
.close-section-button {
    display: flex;
    margin: auto;
}

enter image description here

enter image description here

HTML:

<body>
    <div id="main">
        <section class = "top-level-section" id="home">
    
            
            <p>[TODO ]</p>
        </section>
    </div>
</body>

I tried to isolate the issue but I can't reproduce it when i create a div with a section within it from scratch.

Solution

  • This is happening because you have not set box-sizing to border-box.

    Although you have set the width of the section to 95%, the padding of 20px is calculated separately from this when the above box-sizing is not set to border-box. Once you add this property the padding is set as a part of the specified width.

    Try adding box-sizing: border-box to ".top-level-section" or ".section" classes. Or you can add it globally as well, like this:

    * {
  box-sizing: border-box;
}