Flexbox: Content doesn't fill height of container

Question

I have this HTML and CSS:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test</title>

</head>

<body>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
            flex-direction: row;
            font-weight: bold;
            text-align: center;
            width: 100vw;
            height: 98vh;
        }

        aside.left {
            flex-basis: 400px;
        }

        main {
            flex-grow: 1;
            flex-shrink: 1;
        }

        main,
        aside.left {
            display: flex;
            flex-direction: column;
        }

        div:not(.wrapper) {
            margin: 5px;
            border: 2px solid black;
        }

        div.left.one {
            flex-basis: 30px;
        }

        div.left.two {
            flex-grow: 1;
            flex-shrink: 1;
            height: 100%;
        }

        div.left.two select {
            height: 100%;
            width: 100%;
        }

        div.left.three {
            flex-basis: auto;
        }

        div.right.one {
            flex-basis: 60px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div.right.two {
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
            max-width: 100%;
            align-self: flex-start;
            white-space: nowrap;
            overflow: auto;
        }

        div.right.three {
            flex-basis: auto;
        }

        div.right.four {
            flex-basis: auto;
        }
    </style>
    <div class="wrapper">
        <aside class="left">
            <div class="left one">
                <?php
echo "<select name='selection_folder' onclick='this.form.submit();' style='width: 400px; height: 26px;'>";

echo "<option value='0'";
echo "selected";
echo ">Alle Files anzeigen</option>";
echo "<option value='x' disabled>-------------------------------</option>";
$directory = 'images/';
foreach (new DirectoryIterator($directory) as $file) {
    if ($file->isDir() && !$file->isDot()) {
        echo "<option value='" . $file . "'>" . $file->getFilename() . "</option>";
    }
}

echo "</select>";
?>
            </div>
            <div class="left two">
            <select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
</select>
            </div>
            <div class="left three">
                äöohrjiwh bjqwhnjnmjhhh hhhhhhhhh hhhhhhhhhhhhh hhhh hhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhh hhhhhhhhh
            </div>
        </aside>
        <main>
            <div class="right one">Der Inhalt</div>
            <div class="right two">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
            </div>
            <div class="right three">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </div>
            <div class="right four">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                aliquyam erat
            </div>
        </main>
    </div>
</body>

</html>

Complete page: http://webentwicklung.ulrichbangert.de/aside-main.php

First issue: This is related to the container .left.two. The CSS above works fine so far. However when I remove height:100% for .left.two the select doesn't fill the height of it's container although the HTML inspector displays that .left.two fills the remaining space. Can anyone explain?

Second issue: In IE11 the layout is completely broken. Can anyone help?

As external links tends to die or change, and when, so does the question, and will no longer be useful to future users, so provide us with a working code snippet _within_ the question, which fully reproduce the issue you describe. — Asons, Feb 09 '18 at 08:52
OK, I've posted the complete HTML and CSS now. I suspected that there was some limitation in the size of a posting but it worked fine. — Sempervivum, Feb 09 '18 at 10:52

Asons · Accepted Answer · 2018-02-09T12:47:48.840

Instead of using height: 100%, keep using Flexbox, where I here added display: flex to div.left.two and removed height: 100% on div.left.two and div.left.two select.

The flex-grow: 1; on div.left.two does the job of filling its parent's height, being a flex column item, and the display: flex on div.left.two will make the select to stretch and fill its parent as it becomes a flex row item.

To also make IE behave, and allow the div.right.two to not overflow the its parent, I updated the main like this:

main {
  flex: 1;                 /*  IE need this  */
  min-width: 0;            /*  Firefox need this  */
}

The min-width: 0; prevents the main from overflow its parent.

You also have some border/padding and margin's to fine tune, though I leave that to you.

Updated fiddle

Stack snippet

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: row;
  font-weight: bold;
  text-align: center;
  width: 100vw;
  height: 98vh;
}

aside.left {
  flex-basis: 400px;
}

main {
  flex: 1;                 /*  IE need this  */
  min-width: 0;            /*  Firefox need this  */
}

main,
aside.left {
  display: flex;
  flex-direction: column;
}

div:not(.wrapper) {
  margin: 5px;
  border: 2px solid black;
}

div.left.one {
  flex-basis: 30px;
}

div.left.two {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;                      /*  added instead of height: 100%  */
}

div.left.two select {
  /*height: 100%;                         removed  */
  width: 100%;
}

div.left.three {
  flex-basis: auto;
}

div.right.one {
  flex-basis: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.right.two {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 100%;
  align-self: flex-start;
  white-space: nowrap;
  overflow: auto;
}

div.right.three {
  flex-basis: auto;
}

div.right.four {
  flex-basis: auto;
}

<div class="wrapper">
  <aside class="left">
    <div class="left one">
      <select name='selection_folder' onclick='this.form.submit();' style='width: 400px; height: 26px;'>
        <option value='0' selected>Alle Files anzeigen</option>";
        <option value='x' disabled>-------------------------------</option>
        <option value='file'>filename 1</option>
      </select>
    </div>
    <div class="left two">
      <select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
      </select>
    </div>
    <div class="left three">
      äöohrjiwh bjqwhnjnmjhhh hhhhhhhhh hhhhhhhhhhhhh hhhh hhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhh hhhhhhhhh
    </div>
  </aside>
  <main>
    <div class="right one">Der Inhalt</div>
    <div class="right two">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br>
    </div>
    <div class="right three">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    </div>
    <div class="right four">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
    </div>
  </main>
</div>

Thanks a lot, this solve all of my issues! "keep using Flexbox" - yes, that's a good idea. I like flexbox as in general it is easy and straight forward. However some details are difficult to undestand, e. g. "The min-width: 0; prevents the main from overflow its parent." — Sempervivum, Feb 09 '18 at 20:49
@Sempervivu. Great...and yes, I know, the `min-width` thing is well explained here: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size/36247448 — Asons, Feb 09 '18 at 20:58

Flexbox: Content doesn't fill height of container

1 Answers1