html - 即使 img 在单独的 div 中，它也不会显示

Question

定位图像时遇到问题。看，我在一个 div 中制作了两列。他们每个人都有 50% 的宽度。为什么图像没有出现在第二列中，即使有足够的空间？如何让它进入第二列？进入.imgDiv

JsFiddle:https://jsfiddle.net/awxsqLbc/

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {} .container {
  width: 100vw;
  height: 100vh;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue
}
.content {
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  min-height: 50vh;
  min-width: 70%;
}
.msgDiv {
  width: 50%;
}
.imgDiv {
  width: 50%;
}
.imgDiv img {
  width: 200px;
  height: 200px;
}

<div class="container">
  <div class="content">

    <div class="msgDiv">
      <h1>Welcome.</h1>
      <h2>Are you hungry?  </h2>
      <h3>Start</h3>
    </div>

    <div class="imgDiv">
      <img src="http://moderndogmagazine.com/sites/default/files/styles/blog_top_image/public/images/blogs/top_images/nb_seal_04_2.jpg?itok=DR7IOsFi" alt="" />
    </div>

  </div>
</div>

Answer 1

将此添加到.content:

display:flex;
align-items:center;

在这里摆弄:https://jsfiddle.net/awxsqLbc/1/