Css 使用flexbox在文本旁边浮动图像

我正在尝试一种简单的文章风格，将图像浮动到文本块的右侧——但如何使段落完整？希望不要使HTML变得复杂：

电流输出：

Lorem ipsum dolor sit         Sed do eiusmod             |-------|
amet, consectetur             tempor incididunt          |       |
adipiscing elit.              ut labore.                 |       |
                                                         |-------|

期望输出：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. |-------|
                                                         |       |
Sed do eiusmod tempor incididunt ut labore.              |       |
                                                         |-------|

文章{
显示器：flex；
}
第p条{
}
img{
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

您必须在文本周围添加包装

文章{
显示器：flex；
弯曲方向：行；
}
div.text{
显示器：flex；
弯曲方向：立柱；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

您可以这样做（您需要添加额外的html标记以正确的方式进行）：

CSS

article {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.flex-item {
    -webkit-flex: 1 auto;
    flex: 1 auto;
}

HTML

<article>
    <div class="flex-item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="flex-item">
        <img src="http://placehold.it/150x350">
    </div>
</article>

---

所需结果的图像将非常有用。请参阅更新的问题。