HTML-элементы, введенные через JS (quilljs), конфликтуют с flexbox

Я пытаюсь создать очень простую страницу, по сути ничем не отличающуюся от макета переполнения стека, поскольку есть боковая панель и область «контента», которую можно прокручивать. Однако область моего содержимого предназначена для использования текстовым редактором quilljs.

Я просто создаю div и говорю quilljs использовать этот div для редактора...

    <article>
         <div id="editor"></div>
    </article>

    <script>
        var quill = new Quill('#editor', {theme: 'snow'});
    </script>

Теоретически это прекрасно работает, однако quilljs вводит дополнительный div над div редактора, поэтому я получаю:

     <article>
         <div id="ql-toolbar"></div>
         <div id="editor"></div>
    </article>

Если я проверю и удалю div панели инструментов вручную, я увижу, что div редактора имеет нужный размер (он заполняет весь элемент статьи, а любой переполняющий текст имеет полосу прокрутки).

Мой вывод состоит в том, что введение дополнительной панели инструментов div является основной причиной проблемы, однако я не могу найти хорошего решения...

Единственное решение, которое я вижу в настоящее время, - это вручную настроить размер div «editor», чтобы компенсировать дополнительный div, который, как я знаю, будет добавлен.

 #editor {
  max-height: calc(100% - 40px);
 }

Однако это решение довольно быстро разваливается из-за возможности использования панелей инструментов переменного размера, а также при ручной настройке ширины окна. Я хотел бы найти более надежное решение, если оно существует.

Вот код проблемы (обратите внимание, как обрезана нижняя часть полосы прокрутки): https://codepen.io/anon/pen/wQyxVm


javascript html css quill
person rossoneri    schedule 22.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете оформить свои article и #editor следующим образом:

var quill = new Quill('#editor', {
  theme: 'snow'
});
html,
body {
  height: 100%;
  line-height: 1.5;
  margin: 0px;
}

.wrap {
  height: 100vh;
  display: flex;
}

main {
  flex: 1;
  display: flex;
}

aside {
  overflow-y: auto;
  min-width: 200px;
  max-width: 200px;
  flex: 1;
  background: #f7f7f7;
}

article {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  flex: 2;
  background: #f0eeee;
  height: 100vh;
}

#editor {
  height: auto;
  overflow: auto;
}

h1 {
  margin-top: 0;
}
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />

<div class="wrap">
  <main>
    <aside>
      <div class="tab">
        <ul id="tablist">
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
        </ul>
      </div>

    </aside>

    <article>
      <div id="editor">
        <p>
          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a
          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a
        </p>
      </div>
    </article>
  </main>
</div>

person Kosh    schedule 22.11.2018
comment
Спасибо за ответ, очевидно, я еще не очень хорошо разбираюсь в гибкости. У меня возникли проблемы с репликацией этого исправления локально, и я определил проблему в отсутствии объявления типа документа на моей локальной html-странице. - person rossoneri; 23.11.2018