javascript - 通过 JS (quilljs) 注入(inject)的 HTML 元素与 flexbox 冲突

Question

我正在尝试创建一个非常简单的页面，本质上与堆栈溢出的布局没有什么不同，因为有一个侧边栏和一个可以滚动的“内容”区域。然而，我的内容区域将完全被 quilljs 占据。文本编辑器。

我只是创建一个 div 并告诉 quilljs 将那个 div 用于编辑器...

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

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

这在理论上工作得很好，但是 quilljs 在编辑器 div 之上注入(inject)了一个额外的 div，所以我最终得到:

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

如果我手动检查并删除工具栏 div，我可以看到编辑器 div 的大小符合需要(它填满了整个文章元素，任何溢出的文本都有一个滚动条)。

我的结论是注入(inject)额外的 div 工具栏是问题的根本原因，但是我似乎找不到好的解决方案...

我目前看到的唯一解决方案是手动调整“编辑器”div 的大小，以补偿我知道将添加的额外 div。

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

然而，随着可变大小工具栏的前景以及手动调整窗口宽度，此解决方案很快就会崩溃。如果存在，我想找到更强大的解决方案。

这是问题的代码笔(注意 scollbar 的底部是如何被 chop 的): https://codepen.io/anon/pen/wQyxVm

Answer 1

你可以这样设置你的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>