Can I get a div to stretch out to fit its content, even if that means overflowing its parent div?-CodePudding

I want to create a menu bar. Here's my code so far:

.toolbelt{
    position:fixed;
    box-shadow: 0px 10px 1000px rgba(255, 255, 255, 2);
    top:0px;
    width:100vw;
    height:7vh;
    display:flex;
    align-items: center;
    padding-left: 15px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
}


.path{
    top:0px;
    height:3.3vh;
    border-radius:6px;
    display:flex;
    align-items: center;
    padding: 5px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
    background-color: #222;
    overflow:hidden;
    position: static;
    margin-left:15px;
}

.pathtext{
    font-size:75%;
    background-color:#333;
    height:2vh;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:4px;
    border-radius:4px;
    overflow:hidden;
    white-space: nowrap;
    width: fit-content;
    margin:2px;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="oh hi this is a course thing">
        <meta name="author" content="Adavo'">
    </head>
    <body>
        <div class="toolbelt">
            <div class="path">
                <p style="font-size:110%; margin:5px;"> Path </p>
                <div class="pathtext">
                    <p class="text"> Heading 1 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 2 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 3 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 4 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 5 </p>
                </div>
            </div>
        </div>
    </body>
</html>

I want to be able to resize the parent div (I mean the div with ) and have everything look the way it is (with an additional scroll bar). However, when I try to resize the element, the child divs () always automatically resize to avoid overflowing.

.toolbelt{
    position:fixed;
    box-shadow: 0px 10px 1000px rgba(255, 255, 255, 2);
    top:0px;
    width:100vw;
    height:7vh;
    display:flex;
    align-items: center;
    padding-left: 15px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
}


.path{
    top:0px;
    height:3.3vh;
    border-radius:6px;
    display:flex;
    align-items: center;
    padding: 5px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
    background-color: #222;
    overflow:hidden;
    position: static;
    margin-left:15px;
    width:10vw;
}

.pathtext{
    font-size:75%;
    background-color:#333;
    height:2vh;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:4px;
    border-radius:4px;
    overflow:hidden;
    white-space: nowrap;
    width: fit-content;
    margin:2px;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="oh hi this is a course thing">
        <meta name="author" content="Adavo'">
    </head>
    <body>
        <div class="toolbelt">
            <div class="path">
                <p style="font-size:110%; margin:5px;"> Path </p>
                <div class="pathtext">
                    <p class="text"> Heading 1 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 2 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 3 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 4 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 5 </p>
                </div>
            </div>
        </div>
    </body>
</html>

I don't want this to happen.

Can anybody help me?

CodePudding user response：

Try changing the width from :fit-content; to a pixel value or just try giving it a min-width:fit-content;.

.toolbelt{
    position:fixed;
    box-shadow: 0px 10px 1000px rgba(255, 255, 255, 2);
    top:0px;
    width:100vw;
    height:7vh;
    display:flex;
    align-items: center;
    padding-left: 15px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
}


.path{
    top:0px;
    height:3.3vh;
    border-radius:6px;
    display:flex;
    align-items: center;
    padding: 5px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
    background-color: #222;
    overflow:hidden;
    position: static;
    margin-left:15px;
}

.pathtext{
    font-size:75%;
    background-color:#333;
    height:2vh;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:4px;
    border-radius:4px;
    overflow:hidden;
    white-space: nowrap;
    min-width: fit-content;
    margin:2px;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="oh hi this is a course thing">
        <meta name="author" content="Adavo'">
    </head>
    <body>
        <div class="toolbelt">
            <div class="path">
                <p style="font-size:110%; margin:5px;"> Path </p>
                <div class="pathtext">
                    <p class="text"> Heading 1 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 2 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 3 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 4 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 5 </p>
                </div>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

.toolbelt{
    position:fixed;
    box-shadow: 0px 10px 1000px rgba(255, 255, 255, 2);
    top:0px;
    width:100vw;
    height:fit-content;
    display:flex;
    align-items: center;
    padding-left: 15px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
}


.path{
    top:0px;
    height:3.3vh;
    border-radius:6px;
    display:flex;
    align-items: center;
    padding: 5px;
    background-color: #000;
    border-bottom-color: rgba(255, 255, 255, 1);
    border-bottom-width: 5px;
    background-color: #222;
    overflow:hidden;
    position: static;
    margin-left:15px;
}

.pathtext{
    font-size:75%;
    background-color:#333;
    height:2vh;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:4px;
    border-radius:4px;
    overflow:hidden;
    white-space: nowrap;
    width: fit-content;
    margin:2px;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="oh hi this is a course thing">
        <meta name="author" content="Adavo'">
    </head>
    <body>
        <div class="toolbelt">
            <div class="path">
                <p style="font-size:110%; margin:5px;"> Path </p>
                <div class="pathtext">
                    <p class="text"> Heading 1 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 2 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 3 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 4 </p>
                </div>
                <div class="pathtext">
                    <p class="text"> Heading 5 </p>
                </div>
            </div>
        </div>
    </body>
</html>

Try this. I changed the height of the .toolbelt to fit-content.