I want to write a line bewteen two div, so I add a div(.box_1_2) and set height to 100%, but it's not work. But when add new empty div to div(.box_2_2), the height is working. So why ".box_1_2"'s height is not working？this's real confusion?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box_1">
<div class="box_1_1">label</div>
<div class="box_1_2"></div>
<div class="box_1_3">value</div>
</div>
<div class="box_2">
<div class="box_2_1">label</div>
<div><div class="box_2_2"></div></div>
<div class="box_2_3">value</div>
</div>
</body>
</html>
.box_1, .box_2 {
display: flex;
}
.box_1_2, .box_2_2 {
width: 1px;
background: red;
height: 100%;
}
