如何将 div 放置在另一个包裹在不同容器中的 div 之下

How to position a div under another div wrapped in a different container

是否可以将 div#d2 直接定位在下面每个标记的 div#d1 容器下方，而不是定位在包装高度之外？

#wrapper {
  height: 100%;
  display: flex;
  background-color: steelblue;
  align-items: center;
  min-height: 100%;
  /* fallback style for browsers that do not support the `vh` unit */
  min-height: 100vh;
}
#d2 {
  margin-top: 0.25rem;
  text-align: center;
  background-color:#336712;
}

<body>
  <div id="wrapper">
    <div id="d1">lorem ipsum</div>
  </div> <!-- #wrapper -->
  <div id="d2">This should appear .25rem's under #d1 container</div>
</body>

这是我想要实现的目标的图片： 

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: steelblue;
}
#wrapper {
  display: flex;
}
#d2 {
  margin-top: 0.25rem;
  text-align: center;
  background-color: #336712;
}

<div id="wrapper">
  <div id="d1">lorem ipsum</div>
</div>
<!-- #wrapper -->
<div id="d2">This should appear .25rem's under #d1 container</div>

jsFiddle demo