Fluid width single line textarea

Question

I'm trying to create a div with a fluid-width textarea inside it. The width of the div should be at least 3em, at most 12em, and otherwise the exact same width as the textarea. I've got this working. See fiddle .

When the textarea fills up the div, it creates a line break rather than overflowing to the left, which is the effect I'm going for. Any ideas how to achieve this?

Edit: This code is based on A List Apart's article on Expanding Text Areas .

html

<div><pre><span></span><br></pre>
  <textarea autofocus placeholder='Note'></textarea>
</div>

css

div {
    border: 1px solid grey;
    position: relative;
    display: inline-block;
/*     overflow: hidden; */
    height: 1.3rem;
    min-width: 3rem;
    max-width: 12rem;
}
textarea {
    border: 1px solid blue;
    resize: none;
    background: rgba(0,0,255,.5);
    padding: 0;
    width: 100%;
}
textarea, pre {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    margin: 0;
/*     visibility: hidden; */
}
pre {
    border: 1px solid pink;
    position: relative;
    max-width: 100%;
}
* {
    font: 1rem arial;
}

js

var textarea = document.querySelector('textarea');
var span = document.querySelector('span');
textarea.addEventListener('input', function() {
  span.textContent = textarea.value;
});

Answer 1

In your CSS use:

white-space: nowrap;
overflow: hidden;    

Edit this is deprecated: Can you set wrap="off" as an attribute on the textarea ?

edit: to say overflow: hidden; (per comment below) original: overflow: auto;