Html 无法正确设置Flexbox div_Html_Css_Flexbox

Html 无法正确设置Flexbox div

html css

Html 无法正确设置Flexbox div,html,css,flexbox,Html,Css,Flexbox,我的代码有点小问题。对于少量文本，它看起来非常好（firefox/chromium-窗口最大化）： CSS: HTML: 左边居中正当开始测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试终止但是当我添加：“Test（…）”x2时，我对高度有一个问题，默认设置为auto 这里有一个这里有一个带有x2文本的——这是我的问题谢谢您的帮助。您使用了大量不必要的CSS代码。请参见此我正在使用此CSS来

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

CSS:

HTML:


左边
居中
正当
开始

测试
测试
测试
测试
测试
测试

测试
测试
测试
测试
测试
测试

测试
测试
测试
测试
测试
测试

测试
测试
测试
测试
测试
测试

测试
测试
测试
测试
测试
测试

终止

但是当我添加：“Test（…）”x2时，我对高度有一个问题，默认设置为auto

这里有一个

这里有一个带有x2文本的——这是我的问题

谢谢您的帮助。

您使用了大量不必要的CSS代码。请参见此

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

float: left;
width: 33%;

或者您可以尝试添加

z-index:3至body>div:first child>div
并增加高度：20px到您的菜单

更新
您可能想尝试此方法：
我不知道为什么添加弹性基准值会起作用，解决了问题，但它确实：

另外，不要将元素设置为display:flex
，除非您确实需要将它们设置为flex容器。
顶行会收缩，因为即使您没有指定它，body>div:first child
也会收缩，因为flex shrink
的默认值是1

添加flex-shrink:0
，您将解决该问题
演示我知道这个方法，但是：*我需要100%的正文高度和所有内容*我需要为正文隐藏溢出，为主分区Flexbox自动溢出，但我只对高度和主分区中的大量行有问题。。。谢谢你的建议，我增加了100%高度的支持。这是真的，但我在主分区上有溢出，而不是在正文上，所以整个页面是滚动的-有了这个更改，主分区必须使用页面的其余部分，flexbox解决了这个问题。你有100%的容器，所以高度是容器的100%（尝试添加更多行）高度（所有文本）+顶部俯仰高度-这是使用flexbox的一个很好的例子-我想-谢谢你的timeLooks真的很好，但是看到“开始”，看到-没有“开始”-可见…真的很好，但我看不到“开始”。当我删除一些文本时效果很好。你能修好这个吗？谢谢你的回答。它起作用了。我可以用你的解决方案垂直和水平居中文本吗？？
<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>

float: left;
width: 33%;

* {
    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;
}