WYSIWYG not respecting its own bounding box if in a

I have found that putting a WYSIWYG widget inside a <td></td> wrapper causes the widget to not constrain the text within its bounding box. I don't think this is expected behavior.

I've created a snippet here that shows the issue. The first is not within a pair and if you fill it up with text it will "push down", but keep the text within the box.

However in the other two widgets, do the same thing and the text will break out of the bounding box and appear behind the other elements on the page.

https://mdbootstrap.com/snippets/standard/iaa_73/3780038

Am I doing it wrong?

Sample code:

<table>
        <tr valign="baseline">
            <td align="right" valign="top" nowrap="nowrap">Cons:</td>
            <td>
                <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="cons"></div>
            </td>
        </tr>
          <tr valign="baseline">
                <td align="right" valign="top" nowrap="nowrap">Pros:</td>
              <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="pros"></div>
         </tr>

        <tr valign="baseline">
            <td align="right" valign="top" nowrap="nowrap">bouns:</td>
            <td colspan="5" valign="top">
                <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="bonus"></div>
            </td>
        </tr>
</table>