Cannot make div fit a flex height

Question

I use mainly Bootstrap, but in this case nor pure CSS nor Bootstrap could make the case. I have an HTML like this:

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
    <div class="container">
        <div class="row align-items-center mt-3">
            <div class="col-6 text-center">
                <img width="150" height="150" src="img/user-placeholder.svg">
                <p class="mt-2 mb-0">pholder</p>
            </div>
            <div class="col-6">
                <div class="mb-2">
                    <div class="row">
                        <div class="col-6 text-center">pholder</div>
                        <div class="col-6 text-center">pholder</div>
                    </div>
                    <div class="row">
                        <div class="col-6 text-center">Friends</div>
                        <div class="col-6 text-center">Posts</div>
                    </div>
                </div>
                <butto class="btn btn-transparent mt-2">Click</button>
            </div>
        </div>
        <br>
        <p class="text-center m-0">Contents</p>
        <hr class="mt-0 mb-2">
    </div>
    <div id="filling" class="text-center">
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
    </div>
</div>

Now the issue is: the #filling div has to be populated dynamically and I want it to behave like ListView in Android programming. I must be able to scroll it. Therefore I added some CSS:

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

But if I populate the div by appending children like those three .sample divs, the list grows vertically but the #filling div does too. In other words, its' forcing me to scroll the entire page rather than just the div.

I hope I have been clear, this sure will be marked as a duplicate of any flex question but I'd like to receive a working solution because other than fixing the height of the div, say, at 250px I cannot find a "responsive" way to do it.

First thing, change the = after flex-direction to a colon `flex-direction:column;` — imvain2, Apr 23 '19 at 18:55
Check [this answer](https://stackoverflow.com/a/55753739/8437694) and [this one](https://stackoverflow.com/a/55733093/8437694)... if you are using percentages to define a height, you need a parent with an explicit height set up, you can also use the `vh` unit to set the height with the viewport height — IvanS95, Apr 23 '19 at 18:56

score 0 · Answer 1 · answered Apr 23 '19 at 19:05

I created a quick solution where I set the max-heigth of your #filling div to 50%. Please note, you need to set the height of all outer containers to 100% for this to work.

JSBin link: https://jsbin.com/nofobak/edit?html,css,output

<div id="my-container">
    <div class="container h-40">
        <div class="row align-items-center mt-3">
            <div class="col-6 text-center">
                <img width="150" height="150" src="img/user-placeholder.svg">
                <p class="mt-2 mb-0">pholder</p>
            </div>
            <div class="col-6">
                <div class="mb-2">
                    <div class="row">
                        <div class="col-6 text-center">pholder</div>
                        <div class="col-6 text-center">pholder</div>
                    </div>
                    <div class="row">
                        <div class="col-6 text-center">Friends</div>
                        <div class="col-6 text-center">Posts</div>
                    </div>
                </div>
                <butto class="btn btn-transparent mt-2">Click</button>
            </div>
        </div>
        <br>
        <p class="text-center m-0">Contents</p>
        <hr class="mt-0 mb-2">
    </div>
    <div id="filling" class="h-60 text-center">
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
    </div>
</div>


#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 50%;
}

html {
  height: 100%
}

body {
  height: 100%;
}

#my-container {
  height: 100%;
}

score 0 · Answer 2 · answered Apr 23 '19 at 19:06

A couple of things, h-40 is not a Bootstrap class, unless you have it as a custom class you made; Bootstrap's height utility classes are just h-25, h-50, h-75, h-100, h-auto.

As mentioned in my comment and the answers linked, you if you want to use percentages, you need to have a parent with a fixed height so the percentage can take that as a reference; the other option is to use vh units to set the height relative to the viewport's height.

Bootstrap also provides some utilities for this

Now you would need to take into account the headers content of course

#posts_list {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  max-height: 60vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <div class="container">
    <div class="row align-items-center mt-3">
      <div class="col-6 text-center">
        <img width="150" height="150" src="img/user-placeholder.svg">
        <p class="mt-2 mb-0">pholder</p>
      </div>
      <div class="col-6">
        <div class="mb-2">
          <div class="row">
            <div class="col-6 text-center">pholder</div>
            <div class="col-6 text-center">pholder</div>
          </div>
          <div class="row">
            <div class="col-6 text-center">Friends</div>
            <div class="col-6 text-center">Posts</div>
          </div>
        </div>
        <butto class="btn btn-transparent mt-2">Click</button>
      </div>
    </div>
    <br>
    <p class="text-center m-0">Contents</p>
    <hr class="mt-0 mb-2">
  </div>
  <div id="posts_list" class="h-60 text-center">
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
  </div>
</div>

Cannot make div fit a flex height

2 Answers2