Как CSS ограничить тег объекта с помощью SVG внутри, содержащего div ⇐ CSS

[Anonymous]

Если вы посмотрите на этот пример, то увидите, что если вы переключите телефон в портретный режим и щелкните один из крайних правых желтых полей (чтобы переместить стрелку), вы увидите полосы прокрутки.
Я могу предотвратить это, установив для переполнения значение скрытого на всем экране div, но почему тег объекта не содержится внутри его div?
Объект «стрелка» имеет настройку соответствия объекта, включающую и max-width 100%.
Это CSS

Код: Выделить всё

#content {
height: 92%;
max-height: 92%;
flex: 92 92 92%;
min-height: 0px;
display: flex;
order: 2;
width: 100%;
background-color: var(--alt-bg-color);
flex-wrap: wrap;
font-size: 2em;
overflow: none;
}

#content div {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: var(--cell-height);
background-color: DodgerBlue;
}

#content div div {
display: flex;
flex-direction: row;
height: 100%;
width: var(--cell-height);
padding: 0.5em;

}
#content div div div {
display: flex;
background-color: yellow;
height: 100%;
width: 100%;
padding: 0.25em;
justify-content: center;
cursor: pointer;
}

#modalWait {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 100%;
min-width: 100%;
min-height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(255,255,255,0.3);
z-index: 9;
cursor: not-allowed;
height: 100%;
width: 100%;
}

#modalWait div {
flex: 1 1 50%;
order: 1;
max-width: 50%;
max-height: 50%;
background-color: black;
color: white;
cursor: default;
overflow: auto;
text-align: center;
padding: 0.5em;
font-size: 2em;
}

#placement {
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}

input[type="button"] {
margin-right: 1em;
cursor: pointer;
border-radius: 0.66em;
font-weight: bold;
font-size: 1.5em;
text-shadow: 1px 1px 0 #0d0d0d;
color: #eff;
box-shadow: inset 0 0 0.8em #eff;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0.15, #ccffff),color-stop(0.51, #00ccdd),color-stop(0.65, #007580));
background: -moz-linear-gradient(center top, #ccffff 15%, #00ccdd 51%, #007580 65%);
}

#coords {
font-size: 1em;
}

#continue {
font-size: 1em;
}

#arrow {
transform: rotate(var(--arrow-heading));
max-height: 100%;
max-width: 100%;
object-fit: contain;
transition-duration: 2s;
transition-property: transform;
transform: rotate(var(--arrow-heading));
}

HTML (динамический)



Подробнее здесь: https://stackoverflow.com/questions/792 ... aining-div