ace editor width change loses content

Question

I need to be able to change the width of my ace editor after the user has put code into it. However, when I change the width of the div holding the editor the text doesn't wrap itself into the thinner width, you just cannot see it anymore (see https://jsfiddle.net/0d4whvsq/1/)

var editor = ace.edit("ace_editor_div");
editor.getSession().setUseWorker(false);

editor.setOptions({
    maxLines: 50,
    minLines: 30,
    tabSize:2,
    wrap:true,
});
//editor.$blockScrolling = Infinity;
editor.setValue("this is meant to be too much text for the width of the editor once the width is made smaller.")
$("#shrink_button").on("click",function(){
    $("#ace_editor_div").css("width","200px");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<button id="shrink_button">
shrink</button>
</button>
<div id="ace_editor_div"></div>

You can see from the above example I lose a lot of the text when shrinking the editor! I can't see any basic setting related to width to address this, am I missing a simple way to keep all the text in the editor after resizing? I'm currently thinking I could recreate the whole editor after resizing, but that is obviously not ideal.

Answer 1

after changing the width, you need to call editor.resize()