Html Question posted in
Some basic documentation can be found here.

Html – CSS: Can't resize a div/textarea when scrollbar hidden and text overflows

I’ve noticed that you can’t resize a div/textarea if the contents are overflowing and the scrollbar is hidden.

EXAMPLE

Code example:

.the-div {
  display: block;
  width: 500px;
  height: 50px;
  overflow-y: auto;
  resize: vertical;
}

.the-div::-webkit-scrollbar {
  display: none;
}
<textarea class='the-div'>This can be resized.</textarea>
<br><br>
<textarea class='the-div'>This can not be resized! 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit autem fugit corporis amet quas sint aliquid quae cum, porro magni. Labore ducimus quam impedit atque soluta, possimus quis fuga explicabo?
  Ad velit magni repellendus? Adipisci, autem corrupti voluptatem alias distinctio quis. Veniam ab atque assumenda omnis reiciendis doloremque? Animi quaerat sunt culpa dignissimos officia ipsam sequi a sit nobis deserunt!
  Sit eveniet fugiat quia vero, laboriosam exercitationem libero minima atque velit, fuga sint veritatis molestias dolor dignissimos blanditiis harum sunt! Veritatis sunt deleniti eligendi tenetur quod? Non aspernatur blanditiis eum.
  Sunt placeat quibusdam odio, accusantium inventore nesciunt dolorem corrupti voluptatum, delectus sed saepe porro nobis, officia assumenda! Illo totam magnam odio perspiciatis omnis pariatur velit temporibus, consequuntur recusandae repellat quo!
  Voluptates modi sapiente dolores accusantium reprehenderit facere inventore debitis amet delectus sint officiis assumenda incidunt rerum quasi laborum illum eligendi, excepturi est. Dolorum explicabo eius iure asperiores harum quisquam alias.
  Sequi veniam asperiores sit adipisci modi suscipit rerum neque obcaecati id tempore assumenda dignissimos unde placeat itaque totam, labore ratione ipsam quos et voluptatibus ipsum incidunt animi cum nisi. Est.
  Quaerat cum sapiente ab ratione quisquam, modi voluptate iusto, sed corporis omnis, quos tempora. Fugiat quidem quod ducimus quam sequi alias dicta repudiandae commodi nihil aliquid quia dignissimos, consectetur dolor.
  Ab nemo nostrum maiores. Expedita molestias blanditiis obcaecati commodi sapiente dolore cum ducimus dignissimos, similique dolores vel, voluptatem laudantium repellendus consequuntur provident nostrum ex minus modi possimus! Sunt, delectus repudiandae.
  Eum, ab. Suscipit amet quia obcaecati harum excepturi quod modi et eum laudantium, esse nulla fuga alias mollitia ea, dolor vitae doloremque in aliquam quae dolores accusamus. Nemo, natus quod.
  Harum quam reiciendis itaque assumenda facere magnam cum tenetur, alias voluptate blanditiis odit nobis vitae error molestias non incidunt repudiandae? Quo aut, at iusto veritatis consectetur asperiores vero natus eveniet.</textarea>

Does anyone know a way of getting around this? It seems true on libraries I’ve tested too.

I’d like to enable the scrollbar, but it seems to be against the design of the page. Setting overflow to clip solves this somewhat, but it disables scrollwheel scrolling, you have to use keyboard arrow keys.

Tags:

3

Answers


  1. 0

    You could use scrollbar-width: none; instead which seem to work. Note that this is not supported by all browsers, for example safari does not support it.

    If you want to support all browsers I think you will need to write your own solution with javascript.

    .the-div {
  display: block;
  width: 500px;
  height: 50px;
  overflow-y: auto;
  resize: vertical;
  scrollbar-width: none;
}
    <textarea class='the-div'>This can be resized.</textarea>
<br><br>
<textarea class='the-div'>This can now be resized too! 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit autem fugit corporis amet quas sint aliquid quae cum, porro magni. Labore ducimus quam impedit atque soluta, possimus quis fuga explicabo?
  Ad velit magni repellendus? Adipisci, autem corrupti voluptatem alias distinctio quis. Veniam ab atque assumenda omnis reiciendis doloremque? Animi quaerat sunt culpa dignissimos officia ipsam sequi a sit nobis deserunt!
  Sit eveniet fugiat quia vero, laboriosam exercitationem libero minima atque velit, fuga sint veritatis molestias dolor dignissimos blanditiis harum sunt! Veritatis sunt deleniti eligendi tenetur quod? Non aspernatur blanditiis eum.
  Sunt placeat quibusdam odio, accusantium inventore nesciunt dolorem corrupti voluptatum, delectus sed saepe porro nobis, officia assumenda! Illo totam magnam odio perspiciatis omnis pariatur velit temporibus, consequuntur recusandae repellat quo!
  Voluptates modi sapiente dolores accusantium reprehenderit facere inventore debitis amet delectus sint officiis assumenda incidunt rerum quasi laborum illum eligendi, excepturi est. Dolorum explicabo eius iure asperiores harum quisquam alias.
  Sequi veniam asperiores sit adipisci modi suscipit rerum neque obcaecati id tempore assumenda dignissimos unde placeat itaque totam, labore ratione ipsam quos et voluptatibus ipsum incidunt animi cum nisi. Est.
  Quaerat cum sapiente ab ratione quisquam, modi voluptate iusto, sed corporis omnis, quos tempora. Fugiat quidem quod ducimus quam sequi alias dicta repudiandae commodi nihil aliquid quia dignissimos, consectetur dolor.
  Ab nemo nostrum maiores. Expedita molestias blanditiis obcaecati commodi sapiente dolore cum ducimus dignissimos, similique dolores vel, voluptatem laudantium repellendus consequuntur provident nostrum ex minus modi possimus! Sunt, delectus repudiandae.
  Eum, ab. Suscipit amet quia obcaecati harum excepturi quod modi et eum laudantium, esse nulla fuga alias mollitia ea, dolor vitae doloremque in aliquam quae dolores accusamus. Nemo, natus quod.
  Harum quam reiciendis itaque assumenda facere magnam cum tenetur, alias voluptate blanditiis odit nobis vitae error molestias non incidunt repudiandae? Quo aut, at iusto veritatis consectetur asperiores vero natus eveniet.</textarea>
    Login or Signup to reply.
  2. 0

    In addition to Mark’s answer, you can apply more CSS rules to support other browsers such as Safar, Edge, Firefox, and IE.

    .the-div {
  display: block;
  width: 500px;
  height: 50px;
  overflow-y: auto;
  resize: vertical;
}


/* Chrome, Edge, Safari */

.the-div::-webkit-scrollbar {
  width: 4px;
  /* Adjust if needed */
}

.the-div::-webkit-scrollbar-track,
.the-div::-webkit-scrollbar-thumb,
.the-div::-webkit-scrollbar-thumb:hover {
  background: transparent;
}


/* Firefox */

.the-div {
  scrollbar-width: none;
}


/* Internet Explorer 10+ */

.the-div {
  -ms-overflow-style: none;
}


/* Hide scrollbar for IE, Edge */

.the-div {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.the-div::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}
    <textarea class="the-div">This can be resized.</textarea>
<br /><br />
<textarea class="the-div">
        This can be resized too across major browsers! 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit autem fugit corporis amet quas sint aliquid quae cum, porro magni. Labore ducimus quam impedit atque soluta, possimus quis fuga explicabo?
        Ad velit magni repellendus? Adipisci, autem corrupti voluptatem alias distinctio quis. Veniam ab atque assumenda omnis reiciendis doloremque? Animi quaerat sunt culpa dignissimos officia ipsam sequi a sit nobis deserunt!
        Sit eveniet fugiat quia vero, laboriosam exercitationem libero minima atque velit, fuga sint veritatis molestias dolor dignissimos blanditiis harum sunt! Veritatis sunt deleniti eligendi tenetur quod? Non aspernatur blanditiis eum.
        Sunt placeat quibusdam odio, accusantium inventore nesciunt dolorem corrupti voluptatum, delectus sed saepe porro nobis, officia assumenda! Illo totam magnam odio perspiciatis omnis pariatur velit temporibus, consequuntur recusandae repellat quo!
        Voluptates modi sapiente dolores accusantium reprehenderit facere inventore debitis amet delectus sint officiis assumenda incidunt rerum quasi laborum illum eligendi, excepturi est. Dolorum explicabo eius iure asperiores harum quisquam alias.
        Sequi veniam asperiores sit adipisci modi suscipit rerum neque obcaecati id tempore assumenda dignissimos unde placeat itaque totam, labore ratione ipsam quos et voluptatibus ipsum incidunt animi cum nisi. Est.
        Quaerat cum sapiente ab ratione quisquam, modi voluptate iusto, sed corporis omnis, quos tempora. Fugiat quidem quod ducimus quam sequi alias dicta repudiandae commodi nihil aliquid quia dignissimos, consectetur dolor.
        Ab nemo nostrum maiores. Expedita molestias blanditiis obcaecati commodi sapiente dolore cum ducimus dignissimos, similique dolores vel, voluptatem laudantium repellendus consequuntur provident nostrum ex minus modi possimus! Sunt, delectus repudiandae.
        Eum, ab. Suscipit amet quia obcaecati harum excepturi quod modi et eum laudantium, esse nulla fuga alias mollitia ea, dolor vitae doloremque in aliquam quae dolores accusamus. Nemo, natus quod.
        Harum quam reiciendis itaque assumenda facere magnam cum tenetur, alias voluptate blanditiis odit nobis vitae error molestias non incidunt repudiandae? Quo aut, at iusto veritatis consectetur asperiores vero natus eveniet.
    </textarea>
    Login or Signup to reply.
  3. 0

    Try using opacity: 0 instead of display: none

    .the-div {
  display: block;
  width: 500px;
  height: 50px;
  overflow-y: auto;
  resize: vertical;
}

.the-div::-webkit-scrollbar {
/* display: none; */
opacity: 0;
}
    <textarea class='the-div'>This can be resized.</textarea>
<br><br>
<textarea class='the-div'>This can not be resized! 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit autem fugit corporis amet quas sint aliquid quae cum, porro magni. Labore ducimus quam impedit atque soluta, possimus quis fuga explicabo?
  Ad velit magni repellendus? Adipisci, autem corrupti voluptatem alias distinctio quis. Veniam ab atque assumenda omnis reiciendis doloremque? Animi quaerat sunt culpa dignissimos officia ipsam sequi a sit nobis deserunt!
  Sit eveniet fugiat quia vero, laboriosam exercitationem libero minima atque velit, fuga sint veritatis molestias dolor dignissimos blanditiis harum sunt! Veritatis sunt deleniti eligendi tenetur quod? Non aspernatur blanditiis eum.
  Sunt placeat quibusdam odio, accusantium inventore nesciunt dolorem corrupti voluptatum, delectus sed saepe porro nobis, officia assumenda! Illo totam magnam odio perspiciatis omnis pariatur velit temporibus, consequuntur recusandae repellat quo!
  Voluptates modi sapiente dolores accusantium reprehenderit facere inventore debitis amet delectus sint officiis assumenda incidunt rerum quasi laborum illum eligendi, excepturi est. Dolorum explicabo eius iure asperiores harum quisquam alias.
  Sequi veniam asperiores sit adipisci modi suscipit rerum neque obcaecati id tempore assumenda dignissimos unde placeat itaque totam, labore ratione ipsam quos et voluptatibus ipsum incidunt animi cum nisi. Est.
  Quaerat cum sapiente ab ratione quisquam, modi voluptate iusto, sed corporis omnis, quos tempora. Fugiat quidem quod ducimus quam sequi alias dicta repudiandae commodi nihil aliquid quia dignissimos, consectetur dolor.
  Ab nemo nostrum maiores. Expedita molestias blanditiis obcaecati commodi sapiente dolore cum ducimus dignissimos, similique dolores vel, voluptatem laudantium repellendus consequuntur provident nostrum ex minus modi possimus! Sunt, delectus repudiandae.
  Eum, ab. Suscipit amet quia obcaecati harum excepturi quod modi et eum laudantium, esse nulla fuga alias mollitia ea, dolor vitae doloremque in aliquam quae dolores accusamus. Nemo, natus quod.
  Harum quam reiciendis itaque assumenda facere magnam cum tenetur, alias voluptate blanditiis odit nobis vitae error molestias non incidunt repudiandae? Quo aut, at iusto veritatis consectetur asperiores vero natus eveniet.</textarea>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search