Meta Bind Editor CSS Improvement - Auto scale

Custom CSS & Theme Design
,
1

Hello!
I’ve spent the past 3 hours trying to improve the “Editor” input field from the “Meta-Bind” plugin.
This input field is able to take in input (like a textArea) and then render it as markdown, and store that input into frontmatter. This is really useful for rendering components of a note (eg. “general topics” / “parent notes”, “specific topics” / “child notes”) that would be stored in frontmatter instead. Doing this would make data integration with other plugins (eg breadcrumbs) or outside programs much easier.
However, the editor input field is really large, and having multiple would take up a bunch of unnecessary space.
Does anybody know how to edit the CSS (or similar) of the Editor input field to make it squish / expand in height based on the rendered markdown outputted by the Editor? When I tried it, it just shrank down to nothing (height: 0).

My (not working) CSS looks like this, with “.minimal_editor” being the Class added to the editor:

.minimal_editor {
  /* Switch to Flex layout: */
  display: flex;
  min-height: 5rem; /* ✅ Works just like pixels: */
  outline: 2px dashed;  
}

/* ,
.minimal_editor .mb-editor-input.card > div */
/* .mb-editor-input.card */
/* .cm-preview-code-block,
.mb-input,
.minimal_editor, */
.minimal_editor > .mb-editor-input.card
{
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: peachpuff;
  position: relative;
  /* height:200px; */

  /* background: transparent !important; */
  width: 100%;
  /* display: flex; */
  /* height: fit-content; */
  height: max-content;
  /* height: 100%; */
  /* min-height: 2rem;      */
  /* display: inline-block !important; */
  /* height:auto !important; */
  /* flex-direction: column; */
  /* height: 100%; */
  /* min-height: 5em; */

  overflow: hidden !important; /* Catches floated children */
  flex-wrap: wrap;        /* if horizontal children */
  align-items: stretch;
} 

.minimal_editor > .mb-editor-input.card::after {
  /* content: ""; */
  display: block;
  height: max-content;
  /* clear: both; */
}

/* .minimal_editor >.mb-editor-input.card::after {
  content: "";
  display: block;
  clear: both;
} */

/* Shrinks the Height of the innner div of the .mb-editor-input.card as much as possible,*/
/* since it is the container-div for the text. */
.minimal_editor > .mb-editor-input.card > div {
  margin: 0 !important;
  padding: 0 !important;
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  height: max-content;
  /* width: 100%; */
}