<div class="wrapper">
  <textarea class="wrapper__inner">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur veritatis corrupti, obcaecati illum iste qui expedita quibusdam quaerat saepe voluptates adipisci, voluptatum exercitationem vero odio deleniti aspernatur enim dolor nam doloribus tempore assumenda maxime? Temporibus fugiat iste esse cum at repudiandae autem aut repellendus beatae! Voluptatibus laborum doloribus dolores! Quasi amet tempora illum odio rem voluptatibus ipsam, reprehenderit fuga earum voluptatum saepe nam quod deleniti autem deserunt quis est veritatis nulla placeat corporis laudantium ratione harum excepturi provident! Totam voluptate, ducimus excepturi beatae iste dolores sed tempora officiis cupiditate, velit pariatur consequuntur! Cupiditate, quis, obcaecati consectetur placeat quae alias illum facilis ratione vel nihil error totam veniam et perferendis quaerat quisquam tempora illo deserunt iusto exercitationem cumque accusantium tempore. Magnam, blanditiis tempore. Aliquid earum amet veniam. Blanditiis atque est aspernatur facere quo ea quaerat ullam assumenda, consequatur cumque nihil quasi nesciunt voluptas a sed ipsa vero? Esse ipsum possimus nam consectetur dolor necessitatibus sunt harum? Impedit doloremque dolore rerum vel laborum, eius itaque cum, laudantium ullam officiis debitis mollitia at maiores, ipsa ratione recusandae iure facilis quam magni ut dicta. Reiciendis, maxime. Vitae quasi nemo necessitatibus sapiente tempora eum aliquam nobis? Dolorum nihil mollitia id pariatur adipisci, cum dolores totam maiores facilis! Nemo, veniam unde eius et tempora soluta nostrum at earum exercitationem nulla deserunt nisi dicta nihil voluptas explicabo consequuntur facere beatae fuga temporibus quia. Totam sunt similique eaque omnis cum? Molestias dolorum doloremque, nostrum excepturi porro asperiores neque praesentium obcaecati aliquam officiis? Aspernatur impedit ipsam, porro repellat eos dolores recusandae quasi. Non impedit, facere tempora rerum sunt facilis veritatis ea expedita suscipit! A, ipsam neque! Dolores sit culpa, nam quibusdam animi sapiente. Pariatur, atque deserunt veniam maxime officia sapiente rerum tempora accusamus ut, officiis deleniti repellendus delectus sequi reiciendis asperiores eveniet, consectetur necessitatibus nobis natus itaque expedita facere? Ducimus quos deleniti illo exercitationem possimus, rem impedit perferendis quia natus quis eum omnis, blanditiis soluta reprehenderit vel. Deserunt illum inventore, alias excepturi ut iusto optio reiciendis. Repellendus reprehenderit possimus voluptatum expedita sunt quis id vel tenetur enim est, aut consequuntur vero dicta perspiciatis itaque, deserunt ad. Culpa cumque repudiandae repellat tempore sapiente dolores consequatur obcaecati est labore nisi unde ipsum esse, omnis eveniet? Qui aliquam, quod laboriosam nulla enim quasi veniam corrupti, nesciunt, commodi voluptatum eum eius. Aliquam iste ducimus delectus totam molestiae nisi reprehenderit aliquid porro aspernatur iure suscipit officia quibusdam, veritatis asperiores sequi debitis quis placeat amet?</textarea>
</div>

:root {
  --default-shadow: 0 2px 2px rgba(0, 0, 0, 0.2),
              0 4px 4px rgba(0, 0, 0, 0.2),
              0 8px 8px rgba(0, 0, 0, 0.2);
  --active-shadow: 0 2px 2px rgba(0, 0, 0, 0.2),
              0 4px 4px rgba(0, 0, 0, 0.2),
              0 8px 8px rgba(0, 0, 0, 0.2),
              0 16px 16px rgba(0, 0, 0, 0.2),
              0 32px 32px rgba(0, 0, 0, 0.2);
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
  background: #8fbc8f;
  overflow: hidden;
}

.wrapper {
  width: 480px;
  height: 120px;
  padding: 10px;
  border: 10px solid transparent;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: var(--default-shadow);
  transform: scaleX(-1);
  transition: box-shadow 0.25s ease-in-out;
  overflow: auto;
}

.wrapper:focus-within {
  box-shadow: var(--active-shadow);
}

.wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #333333;
}

.wrapper::-webkit-scrollbar-corner {
  background: transparent;
}

.wrapper__inner {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  font: inherit;
  background: transparent;
  transform: scaleX(-1);
  resize: none;
  overflow: hidden;
}

.wrapper__inner:focus {
  outline: none;
}

const areas = document.querySelectorAll('textarea');

const update = area => {
  area.style.setProperty('height', `${area.scrollHeight}px`);
};

for (const area of areas) {
  area.addEventListener('input', () => {
    update(area);
  });
}

['load', 'resize'].forEach(type => {
  window.addEventListener(type, () => {
    for (const area of areas) {
      update(area);
    }
  });
});