CODEWITHSUNDEEP
htmlcssresponsive
NoStuff
NoStuff

Reputation: 63

Css "width:fit-content;" property doesn't work well. Parent element has this property calculates its width smaller than its content

I am working on a clone project and I have encountered a problem at "width:fit-content" concept. First you should look the following image and I am going to give you related html and css codes with image.

Parent Element And Childs

Parent element and childs As you see at the image, purple is parent element has 8px padding and "width:fit-content" property. The parent has span and div elements inside. Orange one is span element and has 15px width. Red one is div element and has 45.984px width. Pink ones are spans contains texts inside and these are defines width of parents.

All these means total width of inside of parent without its padding is 15px(span) +3px(padding-left) +45.984px(div) = 63.984px. The problem is that, despite all these parent has 48.984px width and that causes the div element is wrapped which I dont want to be happened (As I said parent has "width:fit-content;" property). This problem occurs because of next div sibling element of this purple parent element. Next div element only has width:100% property and if I change width property to 200px(this width value must not exceed width of browser viewport), Content of parent element does not wrap and works well. Problem can be seen via code below.

Html File Includes Problem

Note: Width calculation given above different from example code below because of font styles. I used special font in my original code but the problem still occurs at the example code below.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        *::after,
        *::before {
            box-sizing: border-box;
        }

        /*header is parent of all elements*/
        header {
            display: flex;
            flex-direction: row;
            background-color: gray;
        }

        /*Parent element which is shown as purple at the example image above*/
        /*Problem occurs at this element*/
        .parent-div {
            padding: 0 8px;
            width: fit-content;
            background-color: purple;
        }

        /*Span element inside parent*/
        .child-span {
            display: inline-block;
            background-image: url("/assets/icons/location.png");/*icon image*/
            width: 15px;
            height: 16px;
            margin-top: 22px;
            background-color: orange;
        }

        .child-div {
            float: right;
            padding-left: 3px;
            margin-top: 15px;
            background-color: red;
        }

        .next-sibling-div {
            width: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <header>

        <div class="parent-div">
            <span class="child-span"></span>
            <div class="child-div">
                <span>Span1</span>
                <span>Span2</span>
            </div>
        </div>
        <div class="next-sibling-div">
        </div>
    </header>
</body>

</html>

How to show up the problem ?

Change width property of next-sibling-div to small pixel sized width or delete the div element has next-sibling-div class. After that, watch changing of div element has parent-div class.After that, You will see red div inside purple will be at the same line with orange span element.

As a conclusion, I want orange span and red div element inside purple parent element at the same line but width of purple parent element has not to be fixed size because its content will be changed at the client side so it may be longer than that fixed size and it has to be same width with its content. And also next sibling has to have 100% width property because this part will be responsive.

Upvotes: 1

Views: 2933

Answers (1)

Tom&#225;š Kretek
Tom&#225;š Kretek

Reputation: 477

I have created this, but maybe its something else and not what you wanted. Also I dont know how your icon looks like and what exactly will be in spans

Screen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        *::after,
        *::before {
            box-sizing: border-box;
        }

        /*header is parent of all elements*/
        header {
            display: flex;
            flex-direction: row;
            background-color: gray;
        }

        /*Parent element which is shown as purple at the example image above*/
        /*Problem occurs at this element*/
        .parent-div {
            padding: 8px;
            background-color: purple;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /*Span element inside parent*/
        .child-span {
            display: inline-block;
            background-image: url("/assets/icons/location.png");/*icon image*/
            width: 15px;
            height: 16px;
            background-color: orange;
        }

        .child-div {
            margin-left: 3px;
            background-color: red;
        }

        .next-sibling-div {
            width: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <header>

        <div class="parent-div">
            <span class="child-span"></span>
            <div class="child-div">
                <span>Span1</span>
                <span>Span2</span>
            </div>
        </div>
        <div class="next-sibling-div">
        </div>
    </header>
</body>

Problem is that you have float:left on child-div. That causes spans to display in one row, but I dont know exacly why. I dont use float anywhere, because flex-box works better for me and for most people I think. So, without float:left, each span has its own row. Now to display child-span and child-div next to each other, just add display:flex to parent-div. To center child-span and child-div use justify-content:center and align-items:center. Now delete margin-top from childs and change padding-left to margin-left in child-div, because padding makes space inside element and not outside. And at the end, change padding: 0 8px to padding: 8px on parent-div to make space around childs.

Also I forgotten you can delete content-fit from CSS, because parent-div have width based on inner elements.

Upvotes: 1

Related Questions