Fit div to Remaining Space of Vertically-Centred Parent

Question

With the following code, I'm trying to make it so that the 'scroll' div occupies exactly the remaining space of the 'frame' div's height (ending at its padding boundary).

I would like to avoid a situation where the height of the scroll div is hardcoded, as it should scale with its parent (according to the window height).

I haven't been able to figure out a CSS-based solution, and would much appreciate suggestions.

:root {
    --dlgMW: 0px; --dlgW: 0px;
    --dlgMH: 0px; --dlgH: 0px;
}

html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.editor {
    width:100vw;
    height:100vh;

    background-color: #393939;
    overflow: hidden;
}

.dialog.show {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}

.dialog {
    color: #CCC;
}

.dialog > .window {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    min-width: var(--dlgMW);
    width: var(--dlgW);
    min-height: var(--dlgMH);
    height: var(--dlgH);

    border-radius: 40px;
    background-color: rgba(0,0,0,0.2);
}

.dialog > .window > .frame {
    box-sizing: border-box;
    padding: 30px;
    height: 100%;
    /*overflow: hidden;*/ /* FIXME - Should not be needed */
}

.dialog > .window > .frame > .body {
    position: relative;
    height: 80%;
}

.dialog .content > .scroll {
    overflow-y: auto; /* FIXME Scroll should be visible when div would exceed frame's padding */
}

li.series {
    display: block;
    height: 3em;
    border-bottom: 1px solid #CCC;
}

li.series:hover {
    cursor: pointer;
}

<html lang="en_US" dir="LTR" style="--dlgMW:500px; --dlgW:50%; --dlgMH:0px; --dlgH:80%;">
    <head>
        <link rel="stylesheet" href="main.css">
        <title></title>
    </head>
    <body>
        <div class="editor">
            <div class="dialog show">
                <div class="window">
                    <div class="frame">
                        <div class="body">
                            <div class="content">
                                <h2>Switch Series</h2>
                                <div class="scroll">
                                    <ol id="series_list">
                                        <li class="series">
                                            <span class="series_title">Create New Series</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Main Timeline</span>
                                        </li>

                                        <!-- For testing scroll behavior -->
                                        <li class="series">
                                            <span class="series_title">Custom series 1</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 2</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 3</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 4</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 5</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 6</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 7</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 8</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 9</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 10</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 11</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 12</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 13</span>
                                        </li>
                                        <li class="series">
                                            <span class="series_title">Custom series 14</span>
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

score 0 · Accepted Answer · answered Oct 15 '20 at 19:12

Not sure why so many elements and position/transform, anyway, going down to .content, where it seems to happen, you may use the flex model :

:root {
  --dlgMW: 0px;
  --dlgW: 0px;
  --dlgMH: 0px;
  --dlgH: 0px;
}

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.editor {
  width: 100vw;
  height: 100vh;
  background-color: #393939;
  overflow: hidden;
}

.dialog.show {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.dialog {
  color: #CCC;
}

.dialog>.window {
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: var(--dlgMW);
  width: var(--dlgW);
  min-height: var(--dlgMH);
  height: var(--dlgH);
  border-radius: 40px;
  background-color: rgba(0, 0, 0, 0.2);
}

.dialog>.window>.frame {
  box-sizing: border-box;
  padding: 1vh;
  height: 100%;
  /*overflow: hidden;*/
  /* FIXME - Should not be needed */
}

.dialog>.window>.frame>.body {
  position: relative;
  height: 80%;
}
/*---------------*/
/* -------update-*/
/*---------------*/
.dialog .content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
/*---------------*/
/* ---end-update-*/
/*---------------*/

.dialog .content>.scroll {
  overflow-y: auto;
  /* FIXME Scroll should be visible when div would exceed frame's padding */
}

li.series {
  display: block;
  height: 3em;
  border-bottom: 1px solid #CCC;
}

li.series:hover {
  cursor: pointer;
}

<html lang="en_US" dir="LTR" style="--dlgMW:500px; --dlgW:50%; --dlgMH:0px; --dlgH:80%;">

<head>
  <link rel="stylesheet" href="main.css">
  <title></title>
</head>

<body>
  <div class="editor">
    <div class="dialog show">
      <div class="window">
        <div class="frame">
          <div class="body">
            <div class="content">
              <h2>Switch Series</h2>
              <div class="scroll">
                <ol id="series_list">
                  <li class="series">
                    <span class="series_title">Create New Series</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Main Timeline</span>
                  </li>

                  <!-- For testing scroll behavior -->
                  <li class="series">
                    <span class="series_title">Custom series 1</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 2</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 3</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 4</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 5</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 6</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 7</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 8</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 9</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 10</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 11</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 12</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 13</span>
                  </li>
                  <li class="series">
                    <span class="series_title">Custom series 14</span>
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

If it's not a duplicate of Fill remaining vertical space with CSS using display:flex , it is very similar :)

Hmm, thanks! Needed to adjust the height % a little to get the expected fit, but this works perfectly! — Andy, Oct 16 '20 at 05:36

Fit div to Remaining Space of Vertically-Centred Parent

1 Answers1