自动换行后缩小段落

Question

我在敬酒消息中的段落中打断单词时遇到问题。

整个吐司消息具有最小和最大宽度。 “用户确实... Coffe_VisionBoards_2014a_V2.mp4”是一个段落。本段的自动换行设置为断词。它可以正常工作，但我希望在应用自动换行后缩小它。

最终结果应该是这样的：

如果我将段落宽度设置为100px，它将缩小整个烤面包消息。因此，问题在于该段落在换行后没有收缩。

编辑：

链接到Codepen：https://codepen.io/anon/pen/oMvzKG

html：

<md-toast>
          <div class="toast" flex layout="column" layout-align="center start">
            <h3 class="break-word">Header</h3>
            <p class="break-word">User does not have permission to open: Coffe_VisionBoards_2014A_V2.mp4</p>
        </div>
</md-toast>

CSS：

.toast{
  min-width:100px;
  max-width:400px;
}

.break-word{
  word-wrap: break-word;
}

有什么方法可以实现它吗？ 谢谢