CODEWITHSUNDEEP
htmlcssflexboxmultiple-columns
user3846527
user3846527

Reputation:

Flexbox - two column layout

I'm just starting with flexbox. I am trying to create a two-column layout.

I created the code below, which works, the only problem being that the containers .menu and .content do not strecht to the bottom when the browser window is resized so that scrollbars appear. How can I fix this?

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    body {
      margin: 0;
    }
    
    .wrap {
      display: flex;
      height: 100vh;
      background: aqua;
    }
    
    .menu {
      width: 280px;
      background: orange;
    }
    
    .content {
      flex: 1;
      background: green;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="menu">
      child
    </div>
    <div class="content">
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 186

Answers (2)

Johannes
Johannes

Reputation: 67798

You should change height: 100vh for .wrap to min-height: 100vh; That way it will be at least as high as the viewport (i.e. window), but adjust to the content if the content is higher than what fits into the viewport (since the default setting of height is auto, which you don't need to add):

.wrap {
  display: flex;
  min-height: 100vh;
  background: aqua;
}

.menu {
  width: 280px;
  background: orange;
}

.content {
  flex: 1;
  background: green;
}
<div class="wrap">
  <div class="menu">
    child
  </div>
  <div class="content">
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
  </div>
</div>

Upvotes: 2

User
User

Reputation: 165

Change the height: 100vh; to min-height: 100vh; on your .wrap's CSS.

Upvotes: 2

Related Questions