I have a contenteditable div with the ID editor. I'm encountering an issue where the editor keeps expanding in height as I add content. I have overflow-y set to auto, but instead of adding scrollbars, the #editor expands in height.
Additionally, if I paste an article from the web or from MS Word, the editor expands in both width and height and does not respect the set width and height.
It works if I give it a fixed width and height in pixels, but I want it to be responsive. Can someone point out what the issue might be?
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><link rel="stylesheet" href="main.css"></head><body><div id="main-container"><div id="sidebar"></div><div id="list-container"></div><div id="content"><div id="content-header"><button id="toggle-button">☰</button></div><div id="content-block"><div id="note-tools"></div><div id="inner-content"><form id="formNotes"><input id="noteTitle"><div id="editor" contenteditable="true"></div></form></div></div></div></div></body></html>Css
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-serif;}#main-container { display: flex; width: 100vw; height: 100vh; overflow: hidden; background-color: #f4f4f4;}#sidebar { width: 250px; height: 100%; background-color: #333; color: #fff; padding: 15px;}#list-container { width: 400px; height: 100%; background-color: #555; color: #fff; padding: 15px;}#content { flex-grow: 1; height: 100%; background-color: #fafafa; display: flex; flex-direction: column;}#content-header { width: 100%; height: 60px; background-color: #0073e6; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; box-sizing: border-box;}#toggle-button { display: none; background-color: #005bb5; color: #fff; border: none; padding: 10px; cursor: pointer;}#content-block { flex-grow: 1; display: flex; flex-direction: column; padding: 15px; box-sizing: border-box;}#note-tools { height: 60px; width: 100%; background-color: #f0f0f0; border: 1px solid #ddd; margin-bottom: 10px; box-sizing: border-box;}#inner-content { flex-grow: 1; width: 100%; display: flex; flex-direction: column;}#formNotes { height: 100%; width: 100%; display: flex; flex-direction: column;}#noteTitle { width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;}#editor { flex-grow: 1; width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; overflow-y: auto; word-break: break-all;}@media (max-width: 768px) { #sidebar, #list-container { display: none; } #toggle-button { display: block; } #sidebar.active { display: block; position: absolute; width: 250px; height: 100%; background-color: #333; color: #fff; z-index: 1000; } #content { margin-left: 0; transition: margin-left 0.3s; } #sidebar.active + #content { margin-left: 250px; }}link to codepen
https://codepen.io/Oshi-Wijesinghe/pen/KKjvxLj
As you can see in the code pen, if just keep entering on the editor div it does not add scrollbars instead keep expending the div,
