При place-content: center; Невозможно переместиться на элементы сверху и с лево
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
display: grid;
place-content: center;
}
.container {
width: 15vh;
height: 15vh;
display: inline-grid;
grid-auto-rows: 100%;
grid-auto-columns: 100%;
grid-template-areas:
"a b c d e"
"f g h i j"
"k l m n o"
"p r s t u"
"v w x y z";
background: rgba(0, 0, 0, .5);
place-content: center;
overflow: hidden;
scroll-behavior: smooth;
}
.block#one {
grid-area: e;
background: red;
}
.block#two {
grid-area: h;
background: green;
}
</style>
<body>
<div class="container">
<div class="block" id="one"></div>
<div class="block" id="two"></div>
</div>
</body>Как вы видите есть контейнер (который скрывает дочерние элементы и place-content: center;) внутри которого два элемента первый элемент красный а второй зелёный.
Проблема в том что я не могу перемещаться между зелёным и красным элементом, пример: one.scrollIntoView(). Перемещение до этого элемента не работает. Возможно ли без использований дополнительных элементов переместится к элементу one или two?
Буду рад если кто то сможет сделать это без дополнительных элементов и без Javascript кода.