Div overflows parent but won't scroll

Question

Ok, now that I hate CSS enough for 3 lifetimes, I come here requiring your help. This seems to be the simplest problem but looks like I'm bad at graphical stuff.

I have this page that contains a map and a sidebar. In this sidebar I want two sections : search and results. I want search to stay on top, so I wrote this so far :

{% block body %}
    <div id="app">
        <div id="sidebar" class="sidebar pt-3">
            <h3 class="text-center">
                Recherche
            </h3>
            <div id="sidebar-search" class="sidebar-search">
                <form class="form pr-3 pl-3">
                    <div class="input-group mb-2">
                        <input id="search-area-input" class="form-control" type="text" placeholder="2000">
                        <div class="input-group-append">
                            <div class="input-group-text">m²</div>
                            <button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
                        </div>
                    </div>
                </form>
            </div>
            <hr />
            <div class="scrollable">
                <div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
                <div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
                <div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
            </div>
        </div>
        <div id="map"></div>
    </div>
{% endblock %}

With this CSS :

html, body {
    height: 100%;
}

# From extended template
.navbar {
    position: absolute;
    left: 0;
    right: 0;
}

#app {
    height: 100%;
    padding-top: 56px; #exclude bootstrap navbar
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#map {
    height: 100%;
    background: red;
}

#sidebar {
    height: 100%;
    float: left;
    width: 400px;
    background: white;
}

#sidebar .scrollable {
    overflow-y: auto;
}

And this damn div won't scroll, even tho it's clearly overflowing the parent div

div sidebar :

div sidebar direct child that overflows but won't scroll:

Please help me get free from this hell.

Answer 1

EDIT

Found an even better way to do that :

<div id="sidebar">
    <div id="sidebar-search"></div>
    <div id="sidebar-results"></div>
</div>

With CSS:

#sidebar {
    float: left;
    height: 100%;
    display: flex;
    flex-flow: column;
    background: white;
    width: 400px;
}

#sidebar-search {
    width: 100%;
    max-height: 40%;
    flex-shrink: 0;
    overflow-y: auto;
}

#sidebar-results {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
}

This solves the problem I encountered later when modifying the content (1st div height became variable) and z-index issue with absolute div.

---

Ok so this was not letting me sleep, I got out of bed again to check that.

I made a container div absolute and padded top to start the content after the search area, and a div inside, with height 100% and overflow-y auto :

{% block body %}
    <div id="app">
        <div id="sidebar" class="sidebar pt-3">
            <h3 class="text-center">
                Recherche
            </h3>
            <div id="sidebar-search" class="sidebar-search">
                <form class="form pr-3 pl-3">
                    <div class="input-group mb-2">
                        <input id="search-area-input" class="form-control" type="text" placeholder="2000">
                        <div class="input-group-append">
                            <div class="input-group-text">m²</div>
                            <button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
                        </div>
                    </div>
                </form>
            </div>
            <hr />
            <div id="sidebar-results" class="text-justify">
                <div class="scrollable pl-3 pr-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
                </div>
            </div>
        </div>
        <div id="map"></div>
    </div>
{% endblock %}

And the css corresponding :

html, body {
    height: 100%;
}

.navbar {
    position: absolute;
    left: 0;
    right: 0;
}

#app {
    height: 100%;
    padding-top: 56px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#map {
    height: 100%;
    background: red;
}

#sidebar {
    height: 100%;
    float: left;
    width: 400px;
    background: white;
    position: relative;
}

#sidebar-results {
    position: absolute;
    padding-top: 130px;
    top: 0;
    height: 100%;
}

#sidebar-results > .scrollable {
    height: 100%;
    overflow-y: auto;
}

Now I got no scrollbar on the far right and only the results will scroll

Answer 2

You need to use fixed height to enable the overflow-scroll.

#sidebar .scrollable {
  overflow-y: scroll;
  height: 155px;
}

Here you can check this demo

html, body {
    height: 100%;
}

# From extended template
.navbar {
    position: absolute;
    left: 0;
    right: 0;
}

#app {
    height: 100%;
    padding-top: 56px; #exclude bootstrap navbar
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#map {
    height: 100%;
    background: red;
}

#sidebar {
    height: 100%;
    float: left;
    width: 400px;
    background: white;
}

#sidebar .scrollable {
    overflow-y: scroll;
    height: 155px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div id="app">
        <div id="sidebar" class="sidebar pt-3">
            <h3 class="text-center">
                Recherche
            </h3>
            <div id="sidebar-search" class="sidebar-search">
                <form class="form pr-3 pl-3">
                    <div class="input-group mb-2">
                        <input id="search-area-input" class="form-control" type="text" placeholder="2000">
                        <div class="input-group-append">
                            <div class="input-group-text">m²</div>
                            <button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
                        </div>
                    </div>
                </form>
            </div>
            <hr />
            <div class="scrollable">
                <div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
                <div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
                <div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
            </div>
        </div>
        <div id="map"></div>
    </div>
</body>
</html>