0

Using display: flex solves many problems, however, I can't create some auto-resizing textarea with it, but it works with <div contenteditable="true"></div>. I want to know why it doesn't work with textarea and if there's another way to solve this without using Javascript.

HTML with <div contenteditable="true">:

<div id="flex">
    <div id="space"></div>
    <div contenteditable="true"></div>
</div>

HTML with <textarea>:

<div id="flex">
    <div id="space"></div>
    <textarea></textarea>
</div>

CSS for both:

#flex {
    display: flex;
    height: 90vh;
    background-color: #f99;
    flex-direction: column;
}
#space {
    background-color: #ff9;
    flex: 2;
}
textarea,
div[contenteditable="true"] {
    min-height: 30px;
    max-height: 50vh;
    overflow: auto;
    resize: none;
}

Demo 1 — Demo 2

kelunik
  • 6,750
  • 2
  • 41
  • 70
  • if I understand you correctly you want the textarea to auto expand to content when typing? I think you need a plugin for this. see http://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery – Timmerz Feb 03 '15 at 22:41
  • to answer your question about contenteditable -- this is because it's adding elements directly to the dom just like html – Timmerz Feb 03 '15 at 22:42
  • @Timmerz, yes, that's what I currently do, but I discovered that it's possible without JS when using `
    ` instead.
     – kelunik Feb 03 '15 at 22:42
  • yes, but contenteditable comes with it's own caveats. typically you would use a text editor plugin to manage this as it's working with html elements. a straight textarea is just text. – Timmerz Feb 03 '15 at 22:44
  • @Timmerz Yes, I just need text, but I'm considering to switch to contenteditable, because the current auto-growth handler is rather heavy, because of all those reflows. – kelunik Feb 03 '15 at 22:47
  • what is this for if I may ask? I believe there are various text editors that use contenteditable that can save you time. medium, zenpen, grande, etc. – Timmerz Feb 03 '15 at 22:57
  • @Timmerz, you may. ;-) https://dev.kelunik.com ;-) – kelunik Feb 03 '15 at 23:09

0 Answers0