Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.0 kB · 42 lines
CSS
12345678910111213141516171819202122232425262728293031323334353637383940414243.grow-wrap { /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ display: grid; position: relative; max-width: 100%; overflow-wrap: anywhere; /* limit width in chrome */}
.grow-wrap::after { /* Note the weird space! Needed to preventy jumpy behavior */ content: attr(data-replicated-value) " ";
/* This is how textarea text behaves */ white-space: pre-wrap;
/* Hidden from view, clicks, and screen readers */ visibility: hidden;}.grow-wrap > textarea { /* You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none;
/* Firefox shows scrollbar on growth, you can hide like this. */ overflow: hidden;}.grow-wrap > textarea,.grow-wrap::after { padding: 0; width: 100%; font: inherit; border: none; /* Place on top of each other */ grid-area: 1 / 1 / 2 / 2;}
.grow-wrap > textarea:focus { outline: none;}
.no-wrap::after { white-space: pre !important;}