Заставить TinyMCE быть такой же высоты, как родительский

Question

Просто чтобы помочь вам понять мою проблему, я создал эту ручку, чтобы отобразить проблему, с которой я столкнулся: http://codepen.io/anon/pen/YZwvQz

Как вы можете видеть, когда я устанавливаю высоту TinyMce в 700px, она проходит мимо родительского div, я просто хочу, чтобы TinyMce помещался в родительский div. Я обнаружил, что TinyMce не поддерживает проценты по высоте. Могу ли я сделать это в любом случае, а также прекратить изменение размера после родительского div, в котором находится TinyMce?

Вот мой HTML:

<script>
  tinymce.init({
    selector: '#codeNotesEditor'
  });
</script>
<main>
<div id="myClippetWrapper">

  <div id="clippetNav">



  </div>

  <div id="codeAndNotesWrapper">

    <div id="codeView">

    </div>

    <div id="noteView">

      <textarea id="codeNotesEditor"></textarea>

    </div>

  </div>

</div>

  </main>

Мой CSS:

main
{
  padding: 20px;
}

#myClippetWrapper {
  display: flex;
  height: 700px;
}

#clippetNav {
  box-sizing: border-box;
  padding: 10px;
  width: 250px;
  background-color: #222222;
  margin-right: 10px;
}

#codeAndNotesWrapper {
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

#codeAndNotesWrapper>div {
  flex-basis: 100%;
}

#codeView {
  padding: 10px;
  background-color: #222222;
  margin-right: 10px;
}

#noteView {
  padding: 10px;
  background-color: #222222;
}

#codeNotesEditor {}

JS:

tinymce.init({
  selector: 'textarea',
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code'
  ],
  toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_css: '//www.tinymce.com/css/codepen.min.css',
  height: 700
});

Answer 1

Это очень возможно!

Поскольку TinyMCE генерируется динамически, он присоединяется к element прямо как встроенный стиль. Это означает, что вы не можете нацелиться на него с более высокой специфичностью, но, к счастью, вы можете использовать !important вместо того, чтобы переопределить правила. Вы также не будете знать имя DIV, созданного TinyMCE, поэтому вам придется взять прямого потомка #noteView:

#noteView > div {
  height: 100% !important;
  overflow: hidden !important;
}

Важно дать ему высоту, соответствующую высоте контейнера, но также скрыть переполнение, чтобы оно не проходило через дно контейнера.

Я создал рабочую скрипку, демонстрирующую это здесь.

Надеюсь это поможет!:)