html - 文本未包装在 flex 容器内

Question

我设法将灵活的框布局模块用于很多事情，但是当涉及到段落时，我遇到了这个问题:

• 当我使用少量文本时，一切都按预期工作:

  

• 当我使用大量文本时，布局会中断:

  

这是我使用的代码:

body {
  width: 90%;
  margin: 3em auto;
  background-color: #aaa;
}
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid black;
}
.title {
  flex: 1 0 100%;
  text-align: center;
  background-color: #eee;
}
.image {
  flex: 0 0 auto;
  background-color: #ccc;
}
.image img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.text {
  flex: 6 0 auto;
  background-color: #96AED1;
}

<section>
  <div class="title">
    <h1>Title here</h1>
  </div>

  <div class="image">
    <img src="http://www.macovei-sculptor.ro/img.jpg">
  </div>

  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis velit, ullamcorper eu ornare sed, vulputate quis diam. Duis ultrices rutrum sapien, in condimentum nibh sagittis sit amet. Morbi sit amet rhoncus dui, at pharetra nisi. Nunc et
      lacus porttitor, pretium nisl at, sollicitudin velit. Donec felis nisl, consequat vitae egestas vestibulum, egestas non tortor. Cras mattis non sem nec aliquam. Sed dignissim sit amet sapien vitae feugiat. Pellentesque vel luctus ante, quis ornare
      purus. Nulla in arcu sapien. Aenean tempor arcu ac lacinia pellentesque. Quisque vulputate maximus augue, non aliquet ligula gravida in. Donec a leo justo. Integer velit eros, blandit sit amet elit eget, efficitur mollis nulla. Suspendisse tempor
      ligula facilisis scelerisque ullamcorper. Ut vehicula ligula ipsum, cursus condimentum sapien pretium ac.</p>
  </div>
</section>

为什么是<p>使用大量文本时标签未正确换行？

Answer 1

正确的解决办法是要么放

white-space: initial;

或

min-width: 0;

查看链接 here

*我知道该链接是关于截断文本的。但是，相同的解决方案适用于环绕文本。