how to prevent pointer-events:none affect a button insdide of element with this style

I want the button inside the .container to be clickable, even though it has the pointer-events:none property.

The context is this: in my real code, I must prevent that a parent div (something to the style of the div that has the class .container) cannot be dragged, or click pressed and dragged somewhere.

I think if there is a way to solve this, my problem is solved. this is my code:

function myFunction(){
 alert("click")
}

.container{
  width:30vh;
  height:30vw;
  background:red;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}

<div class="container">
  <button onclick="myFunction()">click</button>
</div>

Answer

Add pointer-events: all or pointer-events: auto to the style of your button.

function myFunction(){
 alert("click")
}

.container{
  width:30vh;
  height:30vw;
  background:red;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}

.container button{
  pointer-events: all;
}

<div class="container">
  <button onclick="myFunction()">click</button>
</div>