I want to haveA 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
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;}<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>I tried putting one div as flex:1 so that it would automatically grow to the remaining size of the parent divIt works properly when the browser width is large, but when it width is less the cdiv2 overflows from the pdiv1cdiv behaviour with large widthcdiv behaviour with small width