老师，请问以下代码为啥设置不了弹性布局呢？

来源：3-5 flex-wrap属性

慕尼黑4757019

2018-11-19 16:05:04

已经添加了display:flex 或者inline-flex 元素A和B都不是成一行

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       .flex-container{
           background:pink;
           width:300px;
           height:300px;
            padding:40px;
            display:-webkit-flex;
       }
       .flex-item{
           width:200px;
           height:100px;
           text-align:center;
           line-height:100px;
       }
       .flex-item:nth-child(1){
           background:green;
       }
       .flex-item:nth-child(2){
           background:yellow;
       }
   </style>
</head>
<body>
   <div class="flex-container">
       <div>
           <div class="flex-item">A</div>
           <div class="flex-item">B</div>
       </div>
   </div>
</body>
</html>