用flexbox包装元素

Question

我刚刚参加了flexbox课程，并且正在练习中，因此，如果答案涉及flexbox概念，我将不胜感激。我有2个文章元素，我希望第二篇文章始终处于该位置，第一篇文章的文本可以放在该文章的下面。但是，目前尊重每篇文章的大小，我该如何解决？这是我当前的HTML和CSS及其jsfiddle：

<section>
  <article class="box1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum ad perferendis eligendi inventore quo deserunt omnis impedit culpa blanditiis, sapiente pariatur a totam cumque, odit incidunt ipsum delectus provident. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit dignissimos, quos id rerum doloremque, dicta odio et perspiciatis officia dolorum amet quaerat doloribus ea sequi porro odit tenetur pariatur. Placeat.
  </article>
  <article class="box2">caja 2</article>
</section>

section {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: row;
  border: solid 1px black;
}

.box1 {
  background: red;
  flex-grow: 1;
}
.box2 {
  background: yellow;
  align-self: flex-start;
  flex-shrink: 0;
}

此外，我还创建了一张图像以可视化我想要的东西：

Answer 1

您无法使用flexbox进行此类操作，这是float的用例：

section {
  height: 400px;
  border: solid 1px black;
}

.box1 {
  background: red;
}

.box2 {
  background: yellow;
  float:right;
}

<section>
  <article class="box2">caja 2</article>
  <article class="box1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum ad perferendis eligendi inventore quo deserunt omnis impedit culpa blanditiis, sapiente pariatur a totam cumque, odit incidunt ipsum delectus provident. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Reprehenderit dignissimos, quos id rerum doloremque, dicta odio et perspiciatis officia dolorum amet quaerat doloribus ea sequi porro odit tenetur pariatur. Placeat.
  </article>
</section>