I want to have
A parent div which contains two child divs
(div.parent>div.child1{this is longer content}+div.child2{any content})
i want one child to have width exactly to its content and one child to cover the remaining space of the parent div
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>playing with css</title>
</head>
<body>
<div class="pdiv1">
<div class="cdiv1">lorem ipsum dolor se amet</div>
<div class="cdiv2">less content</div>
</div>
</body>
</html>
index.css
html,body {
margin: 0;
box-sizing: border-box;
}
.pdiv1 {
width: 30%;
display: flex;
background-color: black;
color: white;
padding: 10px;
}
.cdiv1 {
flex: 1;
background-color: red;
}
.cdiv2 {
background-color: green;
}
I tried putting one div as flex:1 so that it would automatically grow to the remaining size of the parent div
It works properly when the browser width is large, but when it width is less the cdiv2 overflows from the pdiv1
cdiv behaviour with large width
cdiv behaviour with small width