Flexbox wrapping - scrolling disappear with 100vh body

Question

I'm building a multi-column page layout with flexbox, for a bit af responsive feel.

This is my code.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Index</title>
    <link rel="stylesheet" href="basic.css">
</head>

<body>
    <header class="title-site">
        <h1>Test</h1>
    </header>
    <nav class="current-position">
        <a href="#">Test</a>
    </nav>
    <main>
        <nav class="">
            <a href="#">Menu</a>
            <a href="#">Menu</a>
        </nav>
        <article>
            <header class="title-topic">
                <h1>Test</h1>
                <em>Test</em>
            </header>
            <section>
                <h2>Test</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum.</p>
            </section>
            <section>
                <h2>Test</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis bibendum.</p>
                <section>
                    <h3>Test</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum pretium ex sagittis
                        bibendum.</p>
                </section>
            </section>
        </article>
        <aside>
            <dl>
                <dt>Test</dt>
                <dt>Test</dt>
                <dd>
                    <dl>
                        <dt>Test</dt>
                    </dl>
                </dd>
            </dl>
        </aside>
    </main>
    <footer>
        <address>
            Test
        </address>
    </footer>
</body>

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin-ext,vietnamese');

* {
    font-family: 'Inconsolata', Consolas, monospace;
    padding: 0;
    margin: 0;
}

html {
    font-size: 14px;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fafafa;
}

dt {
    margin-bottom: 3px;
}

dd {
    padding-left: 10px;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px;
}

nav a {
    color: black;
    text-decoration: none;
}

.current-position a:after {
    content: ' /'
}

.current-position a:last-of-type:after {
    content: none;
}

nav:not(.current-position) a {
    display: block;
    padding: 8px;
    border-bottom: 1px solid darkgray;
    color: dimgray;
}

nav a[class="active"] {
    color: black;
    border-bottom: 1px solid black;
    background-color: #ebebeb;
}

article {
    padding: 10px;
}

nav, aside {
    padding: 10px;
}

h1 {
    font-size: 1.9em;
}

h2 {
    font-size: 1.7em;
}

h3 {
    font-size: 1.50em;
}

h4 {
    font-size: 1.4em;
}

article header {
    border-bottom: 1px solid lightgray;
}

article section {
    padding-left: 15px;
}

article em {
    font-size: 0.9em;
}

article > section {
    padding-left: 0;
}

section {
    padding-top: 10px;
}

main {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}

main nav {
    flex-grow: 1;
    min-width: 130px;
}

main aside {
    flex-grow: 1;
    font-size: 0.95em;
    color: dimgray;
}

main article {
    overflow-y: auto;
    flex-grow: 1;
    flex-basis: 50%;
    min-width: 250px;
    background-color: #ebebeb;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    min-height:100px;
}

.title-site {
    padding: 20px;
}

.title-site h1 {
    font-weight: normal;
    font-size: 2.5em;
}

.title-topic {
    padding-bottom: 10px;
}

.current-position {
    padding: 20px;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

footer {
    border-top: 1px solid lightgray;
    padding: 10px;
    text-align: right;
    font-size: 0.8em;
}

@media only screen and (max-width: 800px) {
    main aside {
        display: none;
    }
}

JSFiddle link.

Embedded in JSFiddle seems the 100vh value does not work properly, so I'm posting a couple images.

Standard view.

Flexbox wrapped. You can see the footer over the article.

How do I prevent this situation? Am I designing the page in the wrong way?

score 0 · Answer 1 · answered Oct 07 '17 at 11:31

0

You've set a minimum height on the article element:

main article {
    min-height: 100px;
}

So on screen sizes shorter than 100px, the element will overlap the footer because it's not permitted to shrink anymore.

Remove that rule. Revised Fiddle.

answered Oct 07 '17 at 11:31

Michael Benjamin

346,931
104
581
701

Even with this fix nothing is changed. Still footer overlap with main > article. I'm a desktop programmer trying to adapt to web and that's crazy. – LppEdd Oct 07 '17 at 14:39
1

Maybe I misunderstood your question originally. Have you tried `overflow: auto` on `main`? https://jsfiddle.net/g4guyL6f/2/ – Michael Benjamin Oct 08 '17 at 01:18
Yes I did try it, and it effectively solves the overlapping problem. What arise is that now the nav (the menu) scrolls with the article. Probably I need to find a way to place the nav outside the main. – LppEdd Oct 08 '17 at 07:32

Flexbox wrapping - scrolling disappear with 100vh body

1 Answers1