How to force div to stay within another div in a specific example-CodePudding

Folks,

I have an HTML page that has a kind of a menu. At some point I found that if menu items are too long, they break design. I want to force the menu items to stay within their parent div (which should be equally divided between each group). How do I do that? Please consider the example HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
    <style>
        @charset "UTF-8";
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
        @import url('https://fonts.googleapis.com/css2?family=Baloo 2&family=Montserrat:wght@500&family=Roboto&display=swap');
        html {
            font-size: 1vw;
            scroll-padding-top: 74px;
        }
        body {
            background-color: #fefefe;
            font-family: "Roboto", helvetica, arial, sans-serif;
            font-size: 1.3rem;
            font-weight: 400;
            text-rendering: optimizeLegibility;
            margin: 5vw;
            margin-top: 1vw;
            padding: 50px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            /*max-width: 1080px;*/
            box-sizing: border-box;
            border-radius: 5px;
        }
        h1,
        h2,
        h3 {
            font-family: "Roboto", helvetica, arial, sans-serif;
            text-shadow: 1px 1px 12px #002233;
            Display: inline;
        }
        h2,
        h3 {
            color: #5c717c;
            font-weight: 100;
        }
        h2 {
            /*font-size: calc(14px   2vw);*/
            font-size: 2rem;
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        h3 {
            /*font-size: calc(12px   1vw);*/
            font-size: 1.5rem;
            border: 1px solid #d1d7da;
            margin: 3px;
            display: inline-block;
            border-radius: 5px;
            background: #f8f8f8;
            padding-left: 4px;
            padding-right: 4px;
        }
        .menu-container {
            display: table;
            max-width: 98vw;
            padding: 0.1vw;
            width: 100%;
            border-collapse: separate;
            border-spacing: 10px;
            box-sizing: border-box;
        }
        .firstLevel {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            width: 20%;
            display: table-cell;
            padding: 1vw;
            vertical-align: text-top;
            border-radius: 5px;
            margin: 5px;
            box-sizing: border-box;
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        a:hover {
            text-shadow: 0 0px 8px rgba(255, 60, 0, 1);
        }
    </style>
</head>
<body>
    <!--Here goes menu container-->
    <div class='menu-container'>
        <div class='firstLevel'>
            <h2><a href='#FIRST'>FIRST</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#SECOND'>SECOND</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerttyqwertyqwertyqwerty'>qwerttyqwertyqwertyqwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#THIRD'>THIRD</a></h2>
            <h3><a href='#qwerty'>qwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#FOURTH'>FOURTH</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwerty</a></h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
        </div>
    </div>
</body>

</html>

Here I have four groups with some subitems in each group. I found that if some subitems are too long - they break the design. How do I force them to stay within their group's div (either by line break or by scaling?).

CodePudding user response：

See Hope it works..

@charset "UTF-8";
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
        @import url('https://fonts.googleapis.com/css2?family=Baloo 2&family=Montserrat:wght@500&family=Roboto&display=swap');
        html {
            font-size: 1vw;
            scroll-padding-top: 74px;
        }
        body {
            background-color: #fefefe;
            font-family: "Roboto", helvetica, arial, sans-serif;
            font-size: 1.3rem;
            font-weight: 400;
            text-rendering: optimizeLegibility;
            margin: 5vw;
            margin-top: 1vw;
            padding: 50px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            /*max-width: 1080px;*/
            box-sizing: border-box;
            border-radius: 5px;
        }
        h1,
        h2,
        h3 {
            font-family: "Roboto", helvetica, arial, sans-serif;
            text-shadow: 1px 1px 12px #002233;
            Display: inline;
        }
        h2,
        h3 {
            color: #5c717c;
            font-weight: 100;
        }
        h2 {
            /*font-size: calc(14px   2vw);*/
            font-size: 2rem;
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        h3 {
            /*font-size: calc(12px   1vw);*/
            font-size: 1.5rem;
            border: 1px solid #d1d7da;
            margin: 3px;
            display: block;
            border-radius: 5px;
            background: #f8f8f8;
            padding-left: 4px;
            padding-right: 4px;
        }
        .menu-container {
            display: flex;
            max-width: 98vw;
            padding: 0.1vw;
            width: 100%;
            border-collapse: separate;
            border-spacing: 10px;
            box-sizing: border-box;
        }
        .firstLevel {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            width: 20%;
                justify-content: space-evenly;
            padding: 1vw;
            vertical-align: text-top;
            border-radius: 5px;
            margin: 5px;
            box-sizing: border-box;
        }
.firstLevel a{word-break: break-all;}
        a {
            color: inherit;
            text-decoration: none;
            word-break: break-all;
        }
        a:hover {
            text-shadow: 0 0px 8px rgba(255, 60, 0, 1);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        
    </style>
</head>
<body>
    <!--Here goes menu container-->
    <div class='menu-container'>
        <div class='firstLevel'>
            <h2><a href='#FIRST'>FIRST</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#SECOND'>SECOND</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwerttyqwertyqwertyqwerty'>qwerttyqwertyqwertyqwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#THIRD'>THIRD</a></h2>
            <h3><a href='#qwerty'>qwerty</a></h3>
        </div>
        <div class='firstLevel'>
            <h2><a href='#FOURTH'>FOURTH</a></h2>
            <h3><a href='#qwerrty'>qwerrty</a></h3>
            <h3><a href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwerty</a></h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
            <h3><a
                    href='#qwertyqwertyqwertyqwertyqwerty'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</a>
            </h3>
        </div>
    </div>
</body>

</html>