When i use flex box and flex shrink, I wrap a child into a div, It does not work as i want.
I want box 2 be 200px instead of 300px. And why shrink is not working inside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
#content {
display: flex;
width: 300px;
background: blue;
}
#content div {}
.box {
flex-shrink: 0;
width: 100px;
}
.box1 {
flex-shrink: 1;
display: flex;
}
.box2 {
flex-shrink: 1;
width: 300px;
}
</style>
</head>
<body>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box1" style="background-color:blue;">
<div class="box2" style="background-color:green;">B</div>
</div>
</div>
</body>
</html>How can anyone help me?
