Text flowing outside div in IE with angular material

I am having these issues using angular material on IE (I'm using latest version edge and same result for other versions (9,10,11)

1. Text is flowing outside div tagImage may be NSFW.
   Clik here to view.

The below is snippet code for the current div containing 'Task' item, This is the html and CSS only (the screenshot will demonstrate the issue).(note that multilingual-message is a custom directive for multi-language texts support.)

.comp-insp-th .th-cell {  background: #1e9a9f;  padding: 10px 5px;  margin: 5px 0px;}

<div class="th-cell flex" flex=""><multilingual-message message-id="Home.Task" class="ng-isolate-scope"><span ng-bind-html="message[CurrentSettings.language] | unsafeHtml">Task</span></multilingual-message></div>

2. Divs (tags) not taking paddings and margins, the below is snippet code with styles, using angular material directive 'layout-align' and assigned as "space-between stretch" which will add space between items in column, still the tags are overlapping and paddings/margins not working even if added manually.

Image may be NSFW.
Clik here to view.