Div переполняет родительский, но не прокручивает

Question

Хорошо, теперь, когда я ненавижу CSS достаточно для трех жизней, я прихожу сюда, требуя вашей помощи. Это кажется самой простой проблемой, но, похоже, я плохо разбираюсь в графике.

У меня есть эта страница, которая содержит карту и боковую панель. В этой боковой панели я хочу два раздела: поиск и результаты. Я хочу, чтобы поиск оставался на вершине, поэтому я написал это до сих пор:

{% 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 %}

С этим 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;
}

И этот проклятый div не будет прокручиваться, даже если он явно переполняет родительскую div

боковую панель div:

прямую дочернюю панель div, которая переполняется, но не прокручивается:

Пожалуйста, помогите мне освободиться от этого ада.

Answer 1

РЕДАКТИРОВАТЬ

Найден еще лучший способ сделать это:

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

С 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;
}

Это решает проблема, с которой я столкнулся позже при изменении содержимого (высота первого div стала переменной) и проблема z-index с абсолютным div.

---

Хорошо, так что это не давало мне спать, я снова встал с постели, чтобы проверьте это.

Я сделал контейнер div абсолютным и дополненным верхом, чтобы начать содержимое после области поиска, и div внутри, с высотой 100% и переполнением-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 %}

И css, соответствующий:

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;
}

Теперь у меня нет полосы прокрутки в крайнем правом углу, и только результаты будут прокручиваться

Answer 2

Вам нужно использовать фиксированную высоту, чтобы включить переполнение-прокрутки.

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

Здесь вы можете проверить эту демонстрацию

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>