无法正确设置 Flexbox div答案

【问题标题】：Cannot properly set Flexbox div无法正确设置 Flexbox div
【发布时间】：2014-01-04 06:08:49
【问题描述】：

我的代码有小问题。少量文本看起来非常好（firefox / chromium - 窗口最大化）：

CSS：

* { margin: 0; padding: 0; }

html, body { height: 100%; max-height: 100%; overflow: hidden; width: 100%; }

body > div:last-child > div { width: 100%; }

body{
display: flex;
flex-direction: column;
}

body > div:first-child{
display: flex;
flex-grow: 0;
height: auto;
}

body > div:first-child > div{flex-grow: 1;}

body > div:last-child{
align-items: center;
background-color: black;
color: white;
display: flex;
flex-grow: 1;
overflow: auto;
}

HTML：

<body>
<div>
<div style="background-color: red;">Left</div>
<div style="background-color: green; text-align: center;">Center</div>
<div style="background-color: blue; text-align: right;">Right</div>
</div>
<div>
<div style="text-align: center;">
Start<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
End
</div>
</div>
</body>

但是当我添加：“Test(...)”x2 - 我的高度有问题，默认设置为自动。

这是 JSFIDDLE。

这是一个带有 x2 文本的 JSFIDDLE - 这是我的问题。

感谢您的帮助。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我不知道为什么添加 flex-basis 值有效，解决了问题，但它确实：

http://jsfiddle.net/Sd8qm/5/

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
}
body > div:last-child > div {
    width: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
body > div:first-child {
    display: flex;
    flex: 0 auto;
    height: auto;
}
body > div:first-child > div {
    flex-grow: 1;
}
body > div:last-child {
    align-items: center;
    background-color: black;
    color: white;
    flex: 1 0 0; /* here */
    overflow: auto;
}

另外，不要将元素设置为 display: flex，除非您确实需要它们作为弹性容器。

【讨论】：

感谢您的回答。有用。我可以使用您的解决方案将文本垂直和水平居中吗？？

【解决方案2】：

您使用了很多不必要的 CSS 代码。请参阅此example。

我正在使用这个 CSS 来对齐菜单 div：

float: left;
width: 33%;

或者您可以尝试将z-index: 3; 添加到body > div:first-child > div 并将height: 20px; 添加到您的菜单中。

Example 2

更新

您不妨试试这个方法：Example 3

【讨论】：

我知道这个方法，但是： *我需要 100% 高度的 body 和所有内容 *我需要为 body 隐藏溢出和为 main div 溢出 auto Flexbox 是我需要的，但我只有一个问题主 div 中有高度和很多行...感谢您的建议
我在 100% 高度添加了支持。
是的，但是我在主 div 上溢出，而不是在正文上，所以整个页面都滚动了 - 有了这个更改，主 div 必须使用页面的其余部分，而 flexbox 解决了这个问题。
你有 100% 的容器，所以高度是容器的 100%（尝试添加更多行）高度（所有文本）+顶部 div 高度 - 这是使用 flexbox 的好例子 - 我认为- 感谢您的宝贵时间
看起来确实不错，但看到“开始”并看到jsfiddle.net/Sd8qm/10 - 没有“开始” - 可见......

【解决方案3】：

顶行被缩小了，因为即使你没有指定它，body > div:first-child 是 shrinkable 因为flex-shrink 的默认值是1

添加flex-shrink:0即可解决问题

演示 http://jsfiddle.net/kN2x4/13/

【讨论】：

非常好，但我看不到“开始”。当我删除一些文本时很好。请问你能解决这个问题吗？