Can't get WYSIWYG editor to a specific size in a modal windo

Try adding styles like this:

.wysiwyg-content {
  max-height: 150px;
  overflow: auto
}

That didn't work. Here is the code I am using:

        <div class="modal frame fade bottom" id="replyModal" tabindex="-1" aria-labelledby="replyModal" aria-hidden="true">
        <div class="modal-dialog modal-frame modal-bottom">
            <div class="modal-content">
                <div class="modal-header bcBlue text-white">
                    <h5 class="modal-title" id="replyTitle"><i class="fa-solid fa-comment-dots me-2"></i>Post To The Wall</h5>
                    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 text-center">
                            <div class="wysiwyg border border-1 rounded" data-mdb-wysiwyg="wysiwyg" id="replyEditor"  
                                data-mdb-wysiwyg-links-section="false" data-mdb-wysiwyg-textarea-name="ReplyText">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-lg" id="btnSavePost"><i class="fa-solid fa-share me-2"></i>Post</button>
                    <button type="button" class="btn btn-danger btn-lg" data-mdb-dismiss="modal"><i class="fa-solid fa-circle-xmark me-2"></i>Close</button>
                </div>
            </div>
        </div>
    </div>

And the CSS I have is:

#replyEditor.wysiwyg-content {
max-height: 150px;
overflow: auto;

}

The output when run looks like this:

The editor doesn't size according to the CSS, and nothing else I have tried works.

I would appreciate your help on this. Thank you!