Div с максимальной шириной/высотой, изменяемой пользователем

Question

Я хотел бы ... хорошо взглянуть на поле ответа SO. Это поведение, которое я ищу - Полоса прокрутки появляется при переполнении текста, но пользователь может изменить ее размер вручную.

Мой вопрос: Можно ли сделать такую ​​вещь изначально с помощью CSS? С моей текущей настройкой сначала div является маленьким (меньше max-height), и я могу изменить его размер, но только между текущей высотой текста и максимальной высотой. Когда добавляется больше текста и появляется полоса прокрутки, я не могу вообще изменить его размер.

CSS

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

Чтобы быть более точным, я хочу следующее случиться:

• Если высота текста меньше, то определенной максимальной высоты, то элемент устанавливает его размер до минимального значения, необходимого для текста быть полностью видимым (без полосы прокрутки). - works
• Если высота текста превышает заданную максимальную высоту, тогда элемент примет максимальную высоту и появится полоса прокрутки. - works
• Если пользователь не хочет видеть полосу прокрутки или просто хочет увидеть больше текста сразу, он может изменить размер элемента на любую желаемую высоту, а максимальная высота примет эту новую высоту как значение. - не работает, пользователь не может изменять размер по максимальной высоте.

Возможно, было бы быстрее написать JS, чем написать этот вопрос, но я бы хотел, чтобы у этого было такое поведение для статических html-страниц.

Answer 1

Этот стиль вы ищете?
Например:

#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>