Fitting the screen size

If you keep experimenting with your application at runtime, you may notice that the editor component doesn't fit the whole application area once you start resizing the window or maximizing it. To address this, we need to add some CSS styles to tell the component it needs to fit the parent width and height.

Please note that, at the lower level, SimpleMDE wraps another great component called CodeMirror.

Here, we are going to add flex layout features to the whole body of the HTML base and add some styling support for the CodeMirror part, which is part of SimpleMDE. Let's get started:

1. Update the styles in the index.html file according to the following code:

      <style>
              html, body {
                  height: 100%;
                  display: flex;
                  flex: 1;
                  flex-direction: column;
              }
      
              .CodeMirror {
                  flex: 1;
              }
      </style>

1. Run the application and try resizing the window to make it wider or taller. Notice that, now, the markdown editor area perfectly fits the entire page area:

Now, let's move on to integrating the application menu.