I have a Nuxtjs/Vuejs application within which I have a textarea related to XML/JSON. After the user provides the values for these textarea they will be decorated with XML/JSON using CodeMirror.

Initially, the textarea will have the height of 78vh and I would like my CodeMirror to have the same height and width after making the beautification and include the horizontal/vertical scroll bar to move if the content exceeds the border.

I tried to add the CSS property like this but it's not working at all and I get the huge scroll bar to my browser rather within textarea.

.CodeMirror{
    height: 78vh;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

I also tried adding !important and div > div > div > div > div.CodeMirror { to ensure I am taking parent into consideration but nothing seems to work for me.

Can someone please let me know what I need to do so that my textarea will have same height and width and include a horizontal and vertical scrollbar within itself?

I have added my sample code in the CodeSandBox here: https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue