I am working on wrapping an XML message in a mat-expansion-panel to ensure it flows down if the content is too long, instead of extending beyond the panel boundaries.
<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);
}
Various attempts have been made such as using white-space, word-break, enclosing the message in <p> tag, and adjusting the width to 85%, but none of these methods seemed to work effectively.