How to wrap nested span content rendered by mathlive

In my project(angular) I have to get latex inputs and render them. For that purpose I use mathlive. When I render using the convertLatexToMarkup function (provided by mathlive) it creates a lot of nested spans and applies style to it. The problem is I am unable to wrap them in a div, for which I have set width, the content just overflows the div.

I tried setting the white-space:normal style of span elements as suggested elsewhere, but it didn't work or rather it doesn't cover the entire width of the div. If I set white-space:nowrap the content just overflows the div.

A minimal example

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive-static.css" />

    <style>
    /*  
        span {
            white-space:normal;
        } */
    </style>
</head>
<body>
<div style="width:200px;background-color: yellow;">
<p id="toberendered">This is a very long text with math content in it \sqrt[3]{x+y}. This is a very long text with math content in it \sqrt[3]{x+y}</p>

</div>

<p id="nottoberendered">Preview \sqrt[3]{x+y}</p>

<script type="module">
import { convertLatexToMarkup,renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.min.mjs';

function  replaceSpaces(input){
    if(input == null){return "";}
    var output = input.toString().replace(/ /g,"\\; ");
    return "$$" + output + "$$";
  }

var el= document.getElementById("toberendered");
el.innerHTML = convertLatexToMarkup(replaceSpaces(el.innerText),{
 mathstyle:  'textstyle', 
 letterShapeStyle:  'upright' });   
</script>

</body>
</html>

How do I wrap the content to fit the width of a div?

Solution

The text is wrapped correctly when you just declare the actual math parts of the text as such and render these individually:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive-static.css" />

    <style>
    /*  
        span {
            white-space:normal;
        } */
    </style>
</head>
<body>
<div style="width:200px;background-color: yellow;">
<p>This is a very long text with math content in it $$\sqrt[3]{x+y}$$. This is a very long text with math content in it $$\sqrt[3]{x+y}$$</p>
</div>

    <script type="module">
        import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.min.mjs';
        renderMathInDocument();
    </script>

</body>
</html>