这个页脚有一个flexcontainer (id="footerline")，它的flex-wrap属性设置为自动换行。容器包含两个div (class="footerbutton")。当在小屏幕上进行换行时，第二个容器移动到新行，但容器的高度不调整，因此两条线重叠。我可以通过在两个div中删除按钮的填充来解决这个问题，但这显然不是我想要做的。
那么我能做些什么来确保柔性容器在包装后具有合适的高度(当然，在包装之前也是如此，但这不是问题)?将容器的高度设置为100px之类的东西不是一个选项，因为我希望容器的高度足以容纳内容，无论是否包装。
我已经研究了许多关于类似情况的其他问题及其答案，但由此产生的所有实验都对我的情况没有帮助。
谢谢。马尔特•努恩
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#footerline {display:flex; justify-content: space-around; flex-wrap: wrap;
padding: 20px; width: 100%; background: #132a40}
.footerbutton a {color:whitesmoke; padding: 20px; margin-left:10px;
text-decoration: none; background-color: green}
</style>
</head>
<body>
<footer>
<div id="footerline">
<div class="footerbutton">
<a href="Imprint.html">Imprint -- Cookies -- Privacy</a>
</div>
<div>
<nav class="footerbutton">
<a href="english.html">English</a>
<a href="swedish.html">Swedish</a>
<a href="german.html">German</a>
</nav>
</div>
</div>
</footer>
</body>
</html>
请在css中使用footer bottom作为Footerbutton
如果你不需要在Webview中添加，只需在Media query中添加。
.footerbutton a {
color: whitesmoke;
padding: 20px;
margin-left: 10px;
text-decoration: none;
background-color: green;
margin bottom: 50px;
}
如果在WebView中不需要，请在媒体查询
中放置Marginbottom查看这里是否有完整的display: flex代码问题。如果您想在移动设备中获得空间，则add media query用于移动设备。
#footerline {
display:flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
background: #132a40;
}
.footerbutton{
display:flex;
}
.footerbutton a {
color:whitesmoke;
padding: 20px;
margin-left:10px;
text-decoration: none;
background-color: green;
}
#footerline > div {
display: flex;
}<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<footer>
<div id="footerline">
<div class="footerbutton">
<a href="Imprint.html">Imprint -- Cookies -- Privacy</a>
</div>
<div>
<nav class="footerbutton">
<a href="english.html">English</a>
<a href="swedish.html">Swedish</a>
<a href="german.html">German</a>
</nav>
</div>
</div>
</footer>
</body>
</html>我照看你的代码。据我所知，你的柔韧方法行不通。我建议添加一个属性min-height说min-height:200px到你的主footerlinediv。此外，flex是包装只有两个div元素在页脚。您需要需要display:flex和flex-wrap:wrap的div元素在您的页脚内div。尝试这个解决方案，我希望这有帮助。
试试这个，它为你工作
#footerline > div {
display: flex;
}