Width property confusion

HTML-CSS
1

here is a simple flexible boxes code. For #box1 I’ve set a width of 600px which is a constant value (I think). But when I’m decreasing the width of my window ( resizing my window ) , the width of the same box is changing as I resize my window . Please help me to understand this thing. If I’ve set a width of a constant value , it should remain constant no matter what is the screen size .

Here is my code

<html>
    <body>
        <div id="parent-div">
            <div class="child" id="box1">box1</div>
            <div class="child" id="box2">box2</div>
        </div>
    </body>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #parent-div{
        display: flex;
        border: 2px darkslateblue dotted;
        padding: 5px;
        align-items: center;
        height: 50%;
        
    }
    #box1{
        border: 1px red solid;
        width: 600px;
        text-align: center;
        background-color:  lightgreen;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #box2{
        border: 1px green dashed;
        width: 70%;
        text-align: center;
        background-color: lightblue;
    }
</style>
</html>
2

Try playing with the flex-shrink property on #box1.

1 Like
3

It is fixed-width until it needs to shrink. You can use the flex property to control the behavior.

flex: 0 0 230px;

1 Like
4

In addition to the solutions provided above, you can also add min-width: 230px which will keep it from shrinking at all.

1 Like