I'm working on the layout of my HTML/CSS page. I looking to have a sidebar + main content and above them a navbar.

On this picture, the layout seems to be "good" but I want to stretch everything the full size of my page. Without to be annoyed by this navbar because my main content is over extending (~56px)

problem

I wrote the following code...

html,
body {
  margin: 0 auto;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper>* {
  flex: 1 100%;
}

.main {}

.sidebar {}

@media all and (min-width: 600px) {
  .sidebar {
    flex: 1 0 0;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .sidebar {
    order: 1;
  }
  .main {
    order: 2;
  }
}
<body>
  <div class="wrapper">
    <header class="header">
      <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">Navbar</span>
      </nav>
    </header>
    <article class="main">
      <app-root></app-root>
    </article>
    <aside class="sidebar">Aside 1</aside>
  </div>
</body>

2 Answers

1
kukkuz On Best Solutions

From my comments to this question, the issue is because you are using a wrapping flexbox for this layout; you should wrap the aside and the article into another flexbox to make this work. Check out the demo below (omitted the media queries for mobile view):

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0 auto;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column; /* column flexbox */
  border: 1px solid red;
  height: 100%;
}

section,
aside,
header {
  border: 1px solid;
}

.wrapper section {
  display: flex; /* wraps article and aside into a flexbox */
  flex: 1; /* fill remaining space */
}

article {
  flex: 1; /* fill remaining space */
}
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="wrapper">
  <header class="header">
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
  </header>
  <section>
    <aside class="sidebar">Aside 1</aside>
    <article class="main">
      Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum
      some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
    </article>
  </section>
</div>

0
Andu Andrici On

Flex is mainly used as uni-directional layout. While it might be used as you have, it is better to keep it focused on a single line in your case. Simply move the .header outside the .wrapper:

<body>
  <header class="header">
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
  </header>
  <div class="wrapper">
    <aside class="sidebar">Aside 1</aside>
    <article class="main">
      <app-root></app-root>
    </article>
  </div>
</body>

Now simply set a 'default' size for the sidebar, and a 'fluid' size for your article:

.wrapper {
    display: flex;
}

.sidebar {
    flex: 0 0 300px; /* will not grow, will not shrink, will have starting width of 300px */
}

.main {
    flex: 1 1 0; /* will grow, will shrink, will have starting width of 0 - aka it will fill all space available (page width minus 300px) */
}

You can then use media queries to change the default size of the .sidebar at different screen sizes, and the .main will adapt to fill all available space.