css布局一个div有两个子div，其中一个子div有内容的话就会下滑，这是为什么？怎么解决？

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.main{width: 90%;height:80px;background-color: #f19149}
        div.child1{display: inline-block;width: 30px;height: 30px;border: 1px solid lawngreen}
        div.child2{display: inline-block;width: 30px;height: 30px;border: 1px solid black}
    </style>
</head>
<body>
    <div class="main"><div class="child1">这里有内容就会下滑</div><div class="child2"></div></div>
</body>
</html>


        div.child1 {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px solid lawngreen;overflow:hidden
        }