Div with max-width/height resizeable by user

Question

I would like to... well look at the SO answer box. That is behavior what I'm looking for - scrollbar appears on text overflow but user can resize it manually.

My question is, is it possible to do such thing natively with CSS? With my current setup, initially div is small (less then max-height) and I can resize it but only between current text height and max-height. When more text is inserted and scrollbar appear then I can't change it's size at all.

CSS

element.style {
    resize: vertical;
    max-height: 200px;
    overflow: auto;
    padding: 10px;
}

To be more precise I want following to happen:

• If height of text is smaller then defined max-height then element sets it's size to minimal value needed for text to be completely visible (without scrollbar). - works
• If height of text exceeds defined max-height then element will take max-height and scrollbar will appear. - works
• If user don't wont to see scrollbar or simply want to see more text at once, he can resize the element to any desired height and max-height will take that new height as it's value. - don't work, user can't resize over max-height.

It would probably be faster to write JS than writing this question but I would like this have such behavior for static html pages.

Answer 1

Is this the styling you are looking for?
For example:

#element {
    resize: vertical;
    height: auto;
    min-height:200px;
    resize: vertical;
    overflow: auto;
    padding: 10px;
    width: 95%;
    border:1px solid;
}

<textarea id="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus.
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam.
</textarea>