Почему body не скроллится влево, хотя дочерний элемент выходит за границу слева?
У меня есть элемент с классом map-container, с помощью скрипта я могу увеличивать или уменьшать его размеры с помощью tranform: scale(), когда элемент становится больше чем видимая часть экрана, появляется возможность скрола вниз и вправо, но элемент выходит за границу слева и нет возможности его проскролить. Как это решить?
.map-container {
position: absolute;
top: 0;
left: 0;
width: 2414px;
height: 1902px;
background: url(../../img/map.png) no-repeat;
background-size: 100% 100%;
transform-origin: 30% 0%;
}
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif, "Times New Roman", Times, serif;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: #1f222e;
cursor: grab;
}<body class="dragscroll">
<div class="wrapper">
<div class="map-container"></div>
</div>
</body>Картинка не помещается слева, но возможности проскроллить налево нет
