CODEWITHSUNDEEP
htmlcsscontenteditable
MechaBrix
MechaBrix

Reputation: 15

Contenteditable div resizing instead adding scrollbar

I'm having problem with my div with contenteditable=true which break my whole page. When you type a lot of text, instead adding scrollbar it make div bigger so it move others parts of the page... So what I would like my editable div fill remaining width and height of the page but add scrollbar when text being too big whitout moving others elments of the page. Thanks

Image of the problem

JsFiddle

HTML

<body>
    <h1>TEXT</h1>
    <div class="all">
      <div class="container">
        <div class="lines"></div>
        <div class="editor" contenteditable="true" spellcheck="false"></div>
      </div>
      <div class="manage">
        <h1>TEXT</h1>
      </div>
    </div>
</body>

CSS

html, body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  width: 100%
}

h1 {
  margin: 20px;
}

.all {
  display:flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  width: 100%;
  height: 400px;
  overflow: auto;
}

.lines {
  background-color: red;
  border-radius: 20px 0 0 20px;
  height: 100%;
  width:40px;
}

.editor {
  border-radius: 0 20px 20px 0;
  background-color: orange;
  width: 100%;
  height: 100%;
}

Upvotes: 0

Views: 312

Answers (1)

Erond
Erond

Reputation: 116

All you need to do is to add a max-width property to your .editor class. Here is a working code: https://codesandbox.io/s/html-code-editor-forked-g27d9o?file=/index.html

Upvotes: 1

Related Questions