Why it doesn't work when i use 50% but work if i use more than 50%. I want to know what is wrong with half width?

HTML-CSS
1 
<html>
    <head>
        <style>
            .container {
                background-color: darkgrey;
/*                width: 50%;*/
                height: 50%;
                display: flex;
            }
            
            .box-1 {
                background-color: greenyellow;
                width: 50%;
                height: 100%;
                flex-shrink: 1; 
            }
            
            .box-2 {
                background-color: blueviolet;
                width: 50%;
                height: 100%;
                flex-shrink: 2;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box-1"></div>
            <div class="box-2"></div>
        </div>
    </body>
</html>
2

Hello,
You need to add content to the divs before you can see them add by default the div element has 0px height. The following example works -

<html>

<head>
	<style>
		.container {
		background-color: darkgoldenrod;
		width: 55%;
		height: 55%;
		display: flex;
		}
		
		.box-1 {
		background-color: greenyellow;
		width: 50%;
		height: 100%;
		flex-shrink: 1;
		}
		
		.box-2 {
		background-color: blueviolet;
		width: 50%;
		height: 100%;
		flex-shrink: 2;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="box-1"><p></p></div>
		<div class="box-2"></div>
	</div>
</body>

</html>
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.