CSS flexcontainer not high enough after flex-wrap-CodePudding

This footer has a flexcontainer (id="footerline") whose flex-wrap property is set to wrap. The container contains two divs (). When wrapping takes place on small screens, the second container moves to a new line, but the container's height does not adjust, so the two lines overlap. I could fix this by removing the padding of the buttons in the two divs, but this is clearly not what I would like to do.

So what can I do to make sure the flexcontainer has just the right height after wrapping (and before wrapping, too, of course, but that is not the problem)? Setting the height of the container to something like 100px is not an option as I wish the container to be just high enough to contain the content, be it wrapped or not.

I have studied numerous other questions about similar situations and their answers, but all my experiments that resulted from this did not help in my case.

Thank you.

Malte

<!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 >
                    <a href="Imprint.html">Imprint -- Cookies -- Privacy</a>
                </div>
                <div>
                    <nav >
                        <a href="english.html">English</a>
                        <a href="swedish.html">Swedish</a>
                        <a href="german.html">German</a>
                    </nav>
                </div>
            </div>
        </footer>
</body>
</html>

CodePudding user response：

Please use footer bottom in css for Footerbutton

if you dont needed in Webview just add it in Media query.

.footerbutton a {
color: whitesmoke;
padding: 20px;
margin-left: 10px;
text-decoration: none;
background-color: green;
margin bottom: 50px;
}

if not needed in WebView place that Marginbottom in media query

CodePudding user response：

Try this it is working for you

#footerline > div {
   display: flex;
}