[SOLVED]Ckeditor5 integration with meteor, editor not resizing with window

help
1

I just started integrating Ckeditor5 into our project. Using their online builder, I built a custom editor and installed it via npm. Now, to initialize the editor I use the following code, in HTML:

<template name="Create_Challenge">

    <p>We create challenges here</p>
<!--This code is irrelevant to the issue-->
    <form id="create_challenge_form">
        <input name="title" type="text" placeholder="Challenge name here">
        <input name="description" type="text" placeholder="Challenge description here">
        <button class="add_challenge_button"><strong>Submit Challenge</strong></button>
    </form>
<!--This code is relevant to the issue-->
    <div class="fluid-container">
        <div id="challenge_create_textbox" name="content"></div>
    </div>
</template>

and in JS:

import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor';

import './create_challenge.html';

Template.Create_Challenge.onRendered(function() {
    ClassicEditor
    .create( document.querySelector( '#challenge_create_textbox') ,{
				
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'strikethrough',
                'underline',
                '|',
                'link',
                'bulletedList',
                'numberedList',
                '|',
                'indent',
                'outdent',
                '|',
                'imageUpload',
                'blockQuote',
                'mediaEmbed',
                'undo',
                'redo',
                '|',
                'fontColor',
                'fontSize',
                'fontBackgroundColor'
            ]
        },
        language: 'fr',
        image: {
            toolbar: [
                'imageTextAlternative',
                'imageStyle:full',
                'imageStyle:side'
            ]
        },
        licenseKey: '',
        
    })
    .then( editor => {
        if (editor) {
            window.editor = editor;
        }
    })
    .catch( error => {
        console.error( error.stack );
    });
});

I have tried using CSS to change the width of the editor dynamically with little luck. The editor does not resize with the window and overflows creating a big horizontal scrollbar which I definitely don’t want. The sample seems to display the correct behavior and I’m guessing something’s missing in the JS code rather than CSS although it could be both. I’ve tried looking on the internet but found nothing. I have not styled the editor with CSS but when I tried, I managed to limit the width but not make it resize dynamically.

Thanks in advance for the help.

2

Well… just fixed it. Was playing around with the debugger and unchecked the display:flex of the wrapper for the page. Somehow fixed it? If someone could still explain the reason for this strange behaviour and fix would be great. I can’t believe I spend hours on this just to fix it like this…