I have a `div` which is being filled `using .text()` method but when I enter a long text entry, the height of the div doesn't respond and the text overflows the `div`.

I have a `textarea` and a button, when the button is pressed the value of the text area is inserted into the div.

IMAGE: <http://prntscr.com/et5ja5>

Things tried:
=============

```
Height: auto;
display: inline-block;
overflow: visible/auto; etc

```

FULL EXAMPLE UPON REQUEST
=========================

HTML:

```
<body>
    <div data-role="page" id="article1">
        <div data-role="header" data-theme="a" data-position="fixed">
            <h1>Notes</h1>
        </div>

        <div data-role="content">
            <div id="addContainer">
                <button id="addNoteBtn" data-role="button">Add Note</button>
                <textarea id="noteInput" class="textarea" rows="10" cols="50"></textarea>

                <button id="savenotesbtn" data-role="button">Save</button>-->
            </div>
            <div id="displayContainer"></div>
        </div>
    </div>

</body>

```

CSS:

```
#addContainer {
     margin: 20px 20px 50px 20px;
}
 #displayContainer {
     margin: 20px 20px 20px 20px;
}
 .noteDisplay {
     display: inline-block;
     color: white;
     background-color: #96c56f;
     width: 100%;
     padding: 5px, 0px, 5px, 0px;
     border: solid 2px black;
     border-radius: 5px;
     margin-bottom: 5px;
}
 .textarea {
     width: 100%;
     height: 100%;
     font: 1em arial;
     color: rgba(50, 82, 50, 1.0);
}
 .textarea:focus {
     color: rgba(50, 82, 50, 1.0);
     border: 2px solid #96c56f;
     box-shadow: 0px 1px 1px #888888;
}

```

JS:

```
$(document).ready(function() {
    var savesnotesbtn = document.getElementById("savenotesbtn");
    var addnotebtn = document.getElementById("addNoteBtn");

    var noteCount = localStorage.getItem("noteCount");

    if (noteCount === null) {
        noteCount = 0;
    }
    addnotebtn.addEventListener("click", addNotes);

    //ADD NOTES
    function addNotes() {
        noteCount++;
        var note = $("#noteInput").val();
        console.log("Note: " + note);
        console.log("Note Count: " + noteCount);
        var display = document.createElement("div");
        document.getElementById("displayContainer").appendChild(display);
        display.className = "noteDisplay";
        display.id = "note" + noteCount;
        $("#note" + noteCount).text(note);

        localStorage.setItem("noteCount", noteCount);
    }
});

```