CSS Убрать полосы прокрутки у абсолютно позиционированного элемента

Чтобы убрать полосы прокрутки, нам нужно чтобы как минимум:

• 1) Родитель сам умещался в текущий размер (напр. ширина в 100%)
• 2) На родителе стояло свойство overflow: hidden

При этом в нашем случае потомок позиционирован абосолютно, далее рассмотрим пример и решение

Как было (не работает, проявляется полоса прокрутки):

HTML:

    
<div className='some-parent'>
    <div className={'absolute-child'}>Need no scroll!</div>    
 </div>

CSS:

.some-parent {
 background-color: rgb(153, 168, 250);
 overflow: hidden;
 width: 100%;
 height: 250px;
}

.absolute-child {
    background-color: beige; 
    width: 970px;
    height: 250px;
    font-size: 50px; 
    position: absolute;
}

Возможное решение

Добавляем промежуточного родителя, позиционированного относительно (relative):
HTML:

    <div className='some-parent'>
      <div className='relative-subparent'>
        <div className={'absolute-child'}>Need no scroll!</div>    
       </div> 
    </div>

CSS:

.some-parent {
 background-color: rgb(153, 168, 250);
 overflow: hidden;
 width: 100%;
 height: 250px;
}

.relative-subparent {
    overflow: hidden;
    position:relative;
    height: 250px;
}
.absolute-child {
    background-color: beige; 
    width: 970px;
    height: 250px;
    font-size: 50px; 
    position: absolute;
}