CSS flex容器设置flex-wrap换行后高度不足内容重叠

换行后内容重叠不是flex容器不自适应高度导致的，核心问题是：

• 页脚内的<a>标签默认是内联元素，内联元素的垂直方向padding不会被纳入父元素的高度计算范围
• 你给链接设置的padding:20px的上下部分会溢出父容器边界，换行后上下行的溢出部分就会互相重叠

不需要给flex容器设置固定高度，只需要做两处核心修改即可实现高度完全自适应内容：

1. 给链接元素.footerbutton a增加display: inline-block属性，让它的垂直padding可以被父元素正确识别，计入整体高度
2. 给flex容器设置行间距，或者给子项设置上下外边距，保证换行后两行内容之间有自然留白，不会贴在一起
3. （可选）给flex容器#footerline增加align-content: center属性，让多行内容在容器内垂直居中排布，视觉效果更协调

<!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;
            align-content: center; /* 可选：多行内容垂直居中 */
            padding: 20px; 
            width: 100%; 
            background: #132a40;
            row-gap: 15px; /* 控制换行后两行内容的间距 */
        }
        .footerbutton a {
            display: inline-block; /* 核心修复：让垂直padding被计入父元素高度 */
            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>

• 宽屏下两个按钮组在同一行排布，和原设计视觉效果一致
• 小屏幕触发换行时，flex容器会自动根据内容总高度撑开，不会出现内容重叠
• 全程不需要设置固定高度，完全自适应内容尺寸，也不需要移除按钮原有padding

内容的提问来源于stack exchange，提问作者Malte