Resizing with position:absolute not working in firefox-CodePudding

I have a resizable div like this:

#item {
  height: 10rem;
  width: 10rem;
  resize: both;
  overflow: hidden;
  border: solid black 0.5rem;
  position: absolute;
  pointer-events: none;
}

<div id="item"></div>

it works perfectly in Brave but it's not resizing in firefox,

I've narrowed the problem down to position:absolute but if I remove it then the div doesn't resize in brave either.
So how do I keep the pointer-events:none while still being able to resize in firefox?

It would be much better if there was a pure css solution but a workaround using javascript wouldn't hurt either.

CodePudding user response：

The obvious answer would be to wrap the pointer-events: none element inside of another element that handles the user resizing:

/* I'm using CSS logical properties in this demo, the
   inline-axis is the axis on which one would normally
   write, so in English horizontally, and the 'inline-start'
   and 'inline-end' are equivalent to the ends at which
   writing starts and stops, so in English: 'left' and
   'right'; this is - of course - different for Arabic
   and Chinese, as examples.
   Block-size is the axis on which separe 'block's are
   laid, and are perpendicular to the inline-axis; so
   vertical, in English. */
 
.wrapper {
  /* logical property, see above: */
  block-size: 10rem;
  border: solid black 0.5rem;
  /* logical property, see above: */
  inline-size: 10rem;
  overflow: hidden;
  /* I left this in, but I don't know if its necessary on
     the outer element in this use-case: */
  position: absolute;
  resize: both;
}

.item {
  /* background added for visibility, and fixed to prevent
     it from moving when the element is resized: */
  background-attachment: fixed;
  background-image: repeating-linear-gradient(45deg, #ccc3 0 5px, transparent 5px 10px);
  /* positions the .item against the edges of its parent (or
     the ancestor by which its position is calculated): */
  inset: 0;
  pointer-events: none;
  position: absolute;
}

<div >
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate impedit, quo animi illo corrupti? Veniam, quo nobis eaque maxime fugiat!</div>
</div>

JS Fiddle demo.

CodePudding user response：

.wrapper {
  border: 0.5rem solid black;
  resize: both;
  height: 10rem;
  width: 10rem;
  overflow: auto;
}

#item {
  pointer-events: none;
  user-select: none;
  height: 100%;
  width: 100%;
}

<div >
  <div id="item">
    test can't select me.
  </div>
</div>