Safari nested flexbox performance issue - performance

Question

I have a complex flex-based angular page, with a big amount of nested flex items. I need to have customizable stretch elements to the end of page and use scroll by some of inner containers.
Chrome/Edge/Firefox doing well, as expected. But Safari start to freeze whole page.
I have analyzed styles of all elements. And, for demonstrate this issue, I created demo page.
let startTime = new Date().getTime();
window.onload = () => {
window.onload = null;
setTimeout(() => {
const endTime = new Date().getTime();
const timeSpend = endTime - startTime;
const loadTime = `Loading time: ${timeSpend}ms`;
console.log(loadTime);
const input = document.querySelector("label");
input.innerText = loadTime;
startTime = new Date().getTime();
});
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.flex-item {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: rgba(0, 128, 0, 0.05);
}
.block-item {
display: block;
height: 100%;
width: 100%;
background: red;
}
div {
border: 1px solid black;
border-radius: 5px;
padding: 2px 10px;
position: relative;
}
span {
position: absolute;
top: 0;
left: 0;
}
label {
position: fixed;
left: 200px;
top: 10px;
background: white;
z-index: 10;
box-shadow: 0px 0px 10px 2px black;
border-radius: 20px;
padding: 5px;
}
<label></label>
<div class="flex-item"><span>0</span>
<div class="block-item"><span>1</span> <!-- block here -->
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or demo on codepen: https://codepen.io/JBeen/full/LYBwYmJ
Tried on Safari 16.3 and Safari TP 16.4 on Macbook Pro 16 M2 Max
Loading time: ~3.5s
When I increase amount of nested elements and add 1 element -- loading time increase twice, and became ~7s. So after adding several more nested elements -- page start to freeze completely.
Does Safari have an issue on official bug tracker?
Or what I'm doing wrong?