CODEWITHSUNDEEP
htmlcss
pedroyanky
pedroyanky

Reputation: 323

my content is flowing out of its container's height

i have this markup which i gave a background color, but the contents just flow out of the background color, even though i gave it height of 100% and a min-height too.

.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 40px;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}
<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

I am just trying to build without a framework, please can someone point me in the right direction?

Upvotes: 0

Views: 37

Answers (4)

Ehsan
Ehsan

Reputation: 12951

Change :

.nav {
    height: 40px;
    //other codes...
}

To :

.nav {
    height: auto;
    //other codes...
}


.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}
<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

I have update the CSS, please check: 

.nav {
  padding: 0;
  display: flex;
  height: 40px;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding: 8px;
  float: left;
}
<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

Second option: 

.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}
<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

Upvotes: 0

MartinWebb
MartinWebb

Reputation: 2008

That is because you are forcing the height to use height: 40px you need to use min-height:40px;

see fiddle

https://jsfiddle.net/bf6nLmL6/

          .nav  {
                  padding: 0;
                  display: flex;
                  flex-wrap: nowrap;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  min-height: 40px;
                  list-style: none;
                  border: 1px solid red;
           }

Upvotes: 0

Nisarg Shah
Nisarg Shah

Reputation: 14531

Update the height of .nav to auto instead of 40px, and that should allow it to consume required space.

.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}
<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions