Question

I have a textarea tag that has text I want a user to edit. The textarea tag is wrapped inside a div like so:

div.container {
   width: 295px;
   max-height: 250px;
   overflow: auto;
   position: relative;
   border: 1px solid: #EEEEEE;
}
textarea {
   width: 270px;
   height: 100%;
   resize: none;
   overflow: hidden;
   border: none;
}

<div class="container">
   <textarea id="overview">
      blah blah....
   </textarea>
</div>

The div has a fixed width, a max height and shows scroll bars when the height is too large. All this is fine, but how can I get the textarea to expand to 100%? It’s currently only two lines tall and doesn’t expand to show all the text when I have a lot of text inside it. Please see this fiddle to see what I’m talking about.

Answer 1

Your div.container needs an explicit height specified. Child contents won’t expand up to a max-height, just height.

Something like this:
http://jsfiddle.net/dpF7k/
or more simply applying directly to the textarea instead of a wrapping div: http://jsfiddle.net/ujKCf/

The only thing that is missing is that it does not shrink below 250px if there is less content.