Flexbox：内容不填充容器的高度

时间：2018-02-09 08:22:54

标签： html css css3 flexbox

我有这个HTML和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>

完整页面： http://webentwicklung.ulrichbangert.de/aside-main.php

第一个问题：这与容器.left.two有关。上面的CSS到目前为止工作正常。但是，当我删除高度：100％for .left.two时，虽然HTML检查器显示.left.two填充剩余空间，但select不会填充它的容器高度。谁能解释一下？

第二期： 在IE11中，布局完全被打破。有人可以帮忙吗？

1 个答案:

答案 0 :(得分：2)

不要使用height: 100%，而是继续使用Flexbox，我在此处将display: flex添加到div.left.two并删除了height: 100%和div.left.two上的div.left.two select

flex-grow: 1;上的div.left.two可以填充其父级的高度，是一个flex 列项目，而display: flex位于div.left.two上将select拉伸并填充其父级，因为它变为flex 行项。

为了使IE行为正常，并允许div.right.two不溢出其父级，我更新了main，如下所示：

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

min-width: 0;阻止main溢出其父级。

你还有一些边框/填充和边距可以微调，不过我把它留给你。

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>

相关问题
最新问题