CODEWITHSUNDEEP
htmlcssflexbox
jarvic1207
jarvic1207

Reputation: 63

flex-direction: column not working for nested flexboxes

I am trying to create 2 sections of a webpage that are flexboxes. The top being the header/nav, and the one under border-bottom being the mission-container. Both of these flexboxes are nested inside a div with the class of container. In the CSS for container class, I use display:flex; and flex-direction:column;

My issue is that even though I am making the flex direction column in the parent container, the content of mission-container wont go under the bottom border of the header navigation.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
  <body>

    <div class="container">
    
        <header>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"/>
          <nav>
            <ul class="navlinks">
              <li>Mission</li>
              <li>Featured Tea</li>
              <li>Locations</li>
            </ul>
          </nav>
          </header>
        
        
        

        <div class="mission-container">
          <h1>Hi</h1>
          <h1>Hi</h1>
          <h1>Hi</h1>
          <h1>Hi</h1>

        </div>

    </div>
      
  
  </body>
</html>

CSS

body{
  background-color:black;
}

.container{
  flex-direction:column;
}

header{
  display:flex;
  height:69px;
  width:100%;
  border-bottom: 1px solid seashell;
  position:fixed;
  align-items:center;
  justify-content:space-between;
  
}

header img{
  height:50px;
  margin-left:10px;
  
}

.navlinks{
  display:inline-flex;
  color:grey;
  width:100%;
  justify-content:flex-end;
  list-style:none;
  
  
  
}

li{
  margin-right:60px;
  text-decoration:underline;
  font-size:20px;
  
}



.mission-container{
  display:flex;
  color:white;
  align-content:center;
  
}

Upvotes: 2

Views: 165

Answers (1)

Aous Mohammad
Aous Mohammad

Reputation: 822

The main reason that you have positioned your header as fixed header { position: fixed } so your header will always being at the top of your next element, you have 2 choices:

  1. correct it to header { position: relative} and the div container is displayed as a block by default, so you have to give it display flex to make flex-direction property working, just add this:

    .container { display: flex; flex-direction:column; }

  2. Keep your position fixed and make your starting point after the height of your header ex: .mission-container { margin-top: 69px }

Upvotes: 1

Related Questions