Flexbox：內容未填充容器的高度
[英]Flexbox: Content doesn't fill height of container
問題描述
我有這個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可以正常工作。 但是，當我刪除.left.two的height：100％時，盡管HTML檢查器顯示.left.two填充了剩余空間，但select並沒有填充其容器的高度。 誰能解釋？
第二個問題：在IE11中，布局已完全損壞。 有人可以幫忙嗎？
1 個解決方案
解決方案1
2 已采納 2018-02-09 12:32:51
而不是使用height: 100% ，而是繼續使用Flexbox，在這里我在其中添加了display: flex到div.left.two並刪除了height: 100%在div.left.two和div.left.two select上為height: 100% 。
flex-grow: 1; div.left.two上的div.left.two可以完成填充其父級的高度（是flex 列項目）的工作，並且display: flex div.left.two上的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溢出其父代。
您還可以調整一些邊框/邊距和邊距，盡管我將其留給您。
堆棧片段
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>
設置 Flexbox 最小高度以填充滾動容器中的剩余屏幕
[英]Set Flexbox Min Height To Fill Remaining Screen in Scrolling Container
Safari Flexbox：如果內容太高，導航不會從兒童那里獲得高度
[英]Safari Flexbox: Navigation doesn't get height from children if content is too high
給定一個div高度適合容器中圖像的大小，flexbox可以自動計算第二個div高度來填充容器嗎？
[英]Given one div height sized to an image in a container, can flexbox automatically compute a second div height to fill the container?
如何將flexbox底部元素的內容設置為其容器的100％高度
[英]How to get the content of the bottom element of a flexbox to be 100% height its container
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.