Wrap the message if it's too long in a mat expansion panel

Issue

I want to wrap an XML message in a mat-expansion-panel if it's too long so it continues down instead of going beyond the panel.

<mat-expansion-panel class="panel">
  <pre>{{pretty(message.content)}}</pre>
</mat-expansion-panel>

.panel {
  max-height: 80vh;
  width: 1000px;
  overflow: auto;
}

pretty(message: string) {
  return vkbeautify.xml(message);
}

I've tried using white-space, word-break, wrapping the message in <p> tag and setting the width to 85% but all these things didn't seem to do anything.

Image

Solution

Target to pre tag

.panel pre {
  max-height: 80vh;
  width: 1000px;
  overflow: auto;
}

Answered By - Lalji Tadhani