Resize CSS property has no effect - html

Question

I'm working on Bookmarklet. After removing not-important parts, I have bottom docking draggable window and I want to add resizing. I will probably do this by hand (using mouse down/move/up), but I want to know why resize: both property doesn't work.
I have code like this:
<div class="shell-wrapper docking">
<div class="shell-container">
<nav>
<span class="shell-dock"></span>
<span class="shell-destroy">[x]</span>
</nav>
</div>
<div class="shell-mask"></div>
</div>
.shell-wrapper nav {
cursor: row-resize;
color: #ccc;
border-bottom: 1px solid #ccc;
font-family: monospace;
text-align: right;
background: black;
font-size: 13px;
line-height: initial;
margin: 0;
width: 100%;
height: auto;
display: block;
}
.shell-container {
position: fixed;
background: black;
z-index: 99999;
bottom: 0;
left: 0;
right: 0;
height: 150px;
}
.shell-wrapper .shell-destroy {
padding: 5px;
cursor: pointer;
display: inline-block;
}
.shell-wrapper .shell-mask{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 100
}
.shell-wrapper.drag .shell-mask {
display: block;
}
.shell-wrapper .shell-dock,
.shell-wrapper .shell-destroy {
padding: 5px 3px;
cursor: pointer;
display: inline-block;
}
.shell-wrapper.docking nav {
cursor: default;
}
.shell-wrapper .shell-dock::before {
content: "[■]";
}
.shell-wrapper.docking .shell-dock::before {
content: "[_]";
}
.shell-wrapper.docking .shell-container {
bottom: auto;
right: auto;
top: calc(var(--top, 0) * 1px);
left: calc(var(--left, 0) * 1px);
width: calc(var(--width, 500) * 1px);
height: calc(var(--height, 400) * 1px);
box-shadow: 1px 1px 10px 2px rgb(0 0 0 / 30%);
resize: both; /* this have no effect */
}
You can check the Demo on CodePen.
The code uses jQuery but the question is not related. The problem is in CSS.