JavaScriptでライン風アプリを作りたい。

前提・実現したいこと

BracketsのJavaScript でライン風アプリを作っています。
firebaseもつなげて作っています。
ここから、青の四角の中から文字が突き出ないようにしたいのと、青の四角の中にスクロールバーをつけたいです。（下に画像あります）

発生している問題・エラーメッセージ

色々調べてコードを書いていましたがどれもダメでお手上げ状態です。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>Chatアプリ</title>
6</head>
7<body>
8
9<!-- コンテンツ表示画面 -->
10    
11<div>
12    <div>名前:  <input type="text" id="username" ></div>
13    <div>
14        <textarea id="text" cols="30" rows="10"></textarea>
15        <button id="send">送信</button>
16          </div>
17    <div id="output" style="height: 300px; border:1px solid #00f;"></div>
18
19    
20</div>
21
22
23<!--/ コンテンツ表示画面 -->
24
25
26
27<!-- 以下JavaScript領域 -->
28<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
29<!-- 以下Firebase -->
30<!-- The core Firebase JS SDK is always required and must be listed first -->
31<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase.js"></script>
32
33<!-- TODO: Add SDKs for Firebase products that you want to use
34     https://firebase.google.com/docs/web/setup#available-libraries -->
35<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
36
37<script>
38  // Your web app's Firebase configuration
39  var firebaseConfig = {
40    apiKey: "AIzaSyCS_dSdUeSWA014RK-wxjawfW9Qx1A7RR4",
41    authDomain: "ostma-830c4.firebaseapp.com",
42    databaseURL: "https://ostma-830c4.firebaseio.com",
43    projectId: "ostma-830c4",
44    storageBucket: "ostma-830c4.appspot.com",
45    messagingSenderId: "667281478184",
46    appId: "1:667281478184:web:70b9649d3bbc7e28a51b1d",
47    measurementId: "G-CZ8FHV8JW6"
48  };
49  // Initialize Firebase
50  firebase.initializeApp(firebaseConfig);
51  //firebase.analytics();
52    
53    const newPostref = firebase.database().ref();
54    
55    //送信イベント
56    $("#send").on("click",function(){
57        //alert("送信確認");
58        newPostref.push({
59            username:$("#username").val(), //id="username"の値を所得
60            text:$("#text").val()         //id="text"の値を所得
61    
62        });
63        $("#text").val("");//空文字を入れることでtextareaを空にする
64    });
65    
66    
67    //Enterで送信イベント textarea#textを監視
68    $("#text").on("keydown",function(e){
69        if(e.keyCode==13){
70           //alert("送信確認");
71        newPostref.push({
72            username:$("#username").val(), //id="username"の値を所得
73            text:$("#text").val()         //id="text"の値を所得
74    
75        });
76        $("#text").val("");//空文字を入れることでtextareaを空にする
77        }
78        });
79    
80    
81    //受信イベント
82    
83    
84    
85    newPostref.on("child_added",function(data){
86        const v = data.val();//これでデータを所得して、変数ｖに値を渡します
87        const s ='<p>'+v.username+'<br>'+v.text+'</p>';
88        $("#output").append(s);
89          });
90    
91     </script>
92
93</body>
94</html>
95
96
97

補足情報（FW/ツールのバージョンなど）

わかりずらかったらすみません

m.ts10806

2019/12/04 07:38

Brackers になってますし JavaとJavaScriptは名前が似ている別言語なのでタグと内容を見直してください

m.ts10806

2019/12/04 08:14

タグ「JavaScript」は必要に思います現在の二点だけでは見る回答者少ないのでは(たまたま私はBrackets登録してますが)

hitti

2019/12/04 08:29

沢山の分かりやすいご指摘本当にありがとうございます！

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

回答2件

ベストアンサー

overflowにscrollを設定すればできると思われます。

HTML
1
2<div id="output" style="height: 300px; border:1px solid #00f;"></div>
3

HTML
1
2<div id="output" style="height: 300px; border:1px solid #00f; overflow-y: scroll"></div>
3

投稿2019/12/04 09:12

総合スコア10429

2019/12/05 06:36

本当にありがとうございました！とても分かりやすく、助かりました！

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

それ単にこの部分取り除いて見ればいい話のような…

html
1
2<!-- コンテンツ表示画面 -->
3
4<div>
5    <div>名前:  <input type="text" id="username" ></div>
6    <div>
7        <textarea id="text" cols="30" rows="10"></textarea>
8        <button id="send">送信</button>
9          </div>
10    <div id="output" style="([height: 300px;]<<<===ここ)border:1px solid #00f;"></div>
11
12
13</div>
14