Shrink paragraph after word wrap

Question

I have a problem with breaking word in a paragraph in a toast message.

Whole toast message has min and max width. "User does... Coffe_VisionBoards_2014a_V2.mp4" is one paragraph. This paragraph has word-wrap set to break-word. It works fine, but I want it to shrink after applying word-wrap.

The final result should be something like this:

If I set paragraph width to 100px, it will shrink whole toast message. So the problem is that the paragraph is not shrinking after wrapping.

EDIT:

Link to 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;
}

Is there any way how to achieve it? Thank you