How to adjust the height of sidebar elements?

Question

I’m having this problem where something from "DIV Feed" is going beyond the size of your "parent DIV". I am willing to explain further the problem if necessary.

HTML :

<div class="container">
  <div class="row">
    <div class="col-md-2 text-center">
      <ul class="nav nav-stacked feed-adaptation">
        <li class="active"><a href="#"><img src="imagens/abc.png" class="img-responsive"></a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">TEAM</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>

      <div class="container-feed">
          <div class="header-feed">
            <span class="feed-name">FEED</span>
          </div>

          <div class="thumbnail">
            <img class="img-thumbnail" src="imagens/social-icons/facebook.png" alt="">
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>

          <div class="thumbnail">
            <img class="img-thumbnail" src="imagens/social-icons/twitter.png" alt="">
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>

          <div class="thumbnail">
            <img class="img-thumbnail" src="imagens/social-icons/facebook.png" alt="">
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>
        </div>

    </div>
    <div class="col-md-10">
      <div class="conteudo">
        <h1 class="home-text title"><b>/</b>Hello word</b></h1>
        <p class="home-text">subtitle</p>
      </div>
    </div>
  </div>
</div>

CSS :

.col-md-2.text-center {
    padding-right: 0px;
    padding-left: 0px;
    background-color: #ebebeb;
    height: 100%;
}

.thumbnail {
    background-color: transparent;
    border: none;
    display: inline-block;
    width: 90%;
    margin: 0 auto;
}

.row {
    height: auto;
}

.container {
    height: auto;
}

Answer 1

At first it seems enough to put a rule overflow: hidden in the "father DIV". But this will "cut the surplus", hiding part of the "daughter DIV".

Try removing the rule height: 100% of the "DIV father".

In fact, perhaps it’s best to remove all height of your CSS code. I wouldn’t make modifications to .row and .container, fundamental classes of Bootstrap...

And instead of changing the Bootstrap class .col-md-2.text-center, I would create a class with another name, to apply to "father DIV".

HTML

<div class="col-md-2 text-center navegacao">

CSS

.col-md-2.text-center.navegacao {
    padding-right: 0px;
    padding-left: 0px;
    background-color: #ebebeb;
}

.thumbnail {
    background-color: transparent;
    border: none;
    display: inline-block;
    width: 90%;
    margin: 0 auto;
}

Answer 2

I couldn’t reproduce your problem exactly as your code is (height expressed in percentage - but height in pixels the problem arises), but it seems to me that your cause is the fact that you have assigned an explicit height to the father div (.col-md-2.text-center) but not for the div daughter (.container-feed). In this case, it grows beyond the container boundaries, and by default is visible beyond those limits.

If you add a rule of overflow in the father div, however, the daughter div will stop exceeding these limits, and behave according to the specified rule (except overflow: none, which is the same as not having that rule). Using overflow: hidden for example, as suggested by @J. Bruni, will cause the excess to be "discarded", what may or may not be what you want (the lower edges, for example, will be invisible, and any partial content will be similarly inaccessible). Using overflow: scroll or overflow: auto would allow you to roll the whole father div - which might be kind of "weird"...

If you’re not satisfied with these solutions, I suggest you explicitly assign the height of the daughter div. Thus, it will not exceed the height of the container, and you can still assign a rule of scrolling for her alone, if she so desires. Example.