heightを固定しているdivについて、動的に要素が追加されるに応じてheightを高くしたい

下記のようなコードを作成しております。なお、リッチテキストエディタのquillという外部サービスを利用しており、#textileにテキストを入力すると動的に要素が追加されていく仕様（例えば<p>が追加されていきます）になっております。そこで以下の2点について、お尋ねさせてください。

①#textile要素に要素を追加すると同要素の高さを可変的に高くしたいと考えております。例えば、同要素にheightを設定したり.ql-editorのoverfolow-yプロパティを削除したとしても、可変的に高さを変えることができないのですが、どのようにcssを当てれば良いのでしょうか？さらには、一定の高さに達するとoverflow-yが動作する状況にしたいと考えております。

【追記】
より具体的には通常は100px位の最低heightを持っていて、要素を追加していきこれを超える場合には可変的に高さが上がり、1000pxを超えるとoverflow-yが動作するような結果をイメージしています。

②また、構造上、.inquiry_wrapperは.textile_note_wrapperの下にブロック要素として回り込むはずなのに中に.textile_note_wrapperの中に食い込んでしまいます。この原因と解決法についてもアドバイスをいただけると幸いです。
よろしくお願い申し上げます。

JSFiddle

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>TexTile</title>
6    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/default.min.css">
7    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
8
9
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.0/katex.min.css" integrity="sha512-MJmGvrYhgWyFswGuarVFhndqozyLfTRtlbC21mYB+6I1IWvfAuPbEWd38bfQKbrTUb7Jba/bQg/vA9htQu6clQ==" crossorigin="anonymous"/>
11    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.0/katex.min.js" integrity="sha512-RUPvLPAfrnUiXmfqR6xAYlt238VtSE3pOlqlov7LPnk0EAi3U6SvvSLgxNukvwabGjt0F43s0c/rvIZdlD4+Qg==" crossorigin="anonymous"></script>
12
13    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
14    <!-- <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css"> -->
15    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
16
17    <style media="screen">
18      .wrapper{
19        width: 83em;
20        min-width: 990px;
21        margin-right: auto;
22        margin-left: auto;
23      }
24      header{
25        width: 100%;
26        border:1px solid #ccc;
27        margin-bottom: 1em;
28      }
29
30      .textile_note_wrapper{
31        display:flex;
32      }
33      .textile_wrapper{
34        width:50%;
35        margin-right: 2%;
36      }
37      .note_wrapper{
38        width:50%;
39      }
40      .inquiry_wrapper{
41        border:1px solid #ccc;
42      }
43      #textile,#note{
44        /*height: 100px;
45      }
46    </style>
47</head>
48<body>
49  <div class="wrapper">
50      <header>
51         <div class="header">header</div>
52         <div class="navigatoer">navigator</div>
53         <div class="bread">bread</div>
54      </header>
55      <main>
56        <div class="textile_note_wrapper">
57          <div class="textile_wrapper">
58            <div id="textile"></div>
59          </div>
60          <div class="note_wrapper">
61            <div id="note"></div>
62          </div>
63        </div>
64        <div class="inquiry_wrapper">inquiry_wrapper</div>
65      </main>
66  </div>
67
68 <script>
69
70var toolbarOptions_textile = [
71  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
72  ['blockquote',],          // custom button values
73  [{ 'list': 'ordered'}, { 'list': 'bullet' },{ 'align': [] }],　//{ 'direction': 'rtl' }
74  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
75  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
76  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
77  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
78  [{ 'font': [] }],
79  ['link', 'image','video'],
80  ['formula'],
81  ['clean'],                                         // remove formatting button
82];
83
84var toolbarOptions_note = [
85  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
86  ['blockquote',],          // custom button values
87  [{ 'list': 'ordered'}, { 'list': 'bullet' },{ 'align': [] }],　//{ 'direction': 'rtl' }
88  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
89  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
90  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
91  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
92  [{ 'font': [] }],
93  ['link', 'image','video'],
94  ['formula'],
95  ['clean'],                                         // remove formatting button
96];
97
98
99 var quill_textile = new Quill('#textile', {
100   theme: 'snow', // snow or bubble
101   placeholder: 'テキストを作成する',
102   readOnly: false, // default false
103   modules: {
104      toolbar: toolbarOptions_textile
105   },
106 });
107
108 var quill_note = new Quill('#note', {
109   theme: 'snow', // snow or bubble
110   placeholder: 'ノートを作成する',
111   readOnly: false, // default false
112   modules: {
113      toolbar: toolbarOptions_note
114   },
115 });
116
117</script>
118</body>
119</html>
120

行動規範の内容に同意します

回答1件

自己解決

適切な方法か分かりませんが、以下のcssを当てることで解決いたしました。

css
1    #textile{
2        height: auto;
3        min-height: 300px;
4        max-height:500px;
5        overflow-y: scroll;
6      }

よろしくお願い申し上げます。

投稿2021/04/09 04:36

pegy

総合スコア245

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

heightを固定しているdivについて、動的に要素が追加されるに応じてheightを高くしたい

関連した質問