Develop Reference

Edges of a CSS grid cannot be scrolled to

Basically, I have this user-customisable CSS-grid (node: width and height don't have limits, and I do not want it to have such) and it can be really really wide and/or really really high, and if that happens, the scrolling just stops somewhere and the elements not in the middle of the grid just get made inaccessible.
This is what I have at the moment and I got zero idea how to make it scroll to all parts of the grid
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0px;
}
#board {
display: grid;
grid-template-columns: 26px
}
.tile {
width: 20px;
height: 20px;
border-style: solid;
border-color: rgb(64, 64, 64);
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center
}
<div id="game_div">
<div id="board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<!--
There are a lot more tiles that get added via .appendChild().
Imagine like a few thousand more tiles here.
-->
</div>
<!-- Irrelevant Minesweeper stuff -->
<button onclick="help()">Stuck?</button>
<p id="minecount" style="display:inline"></p>
</div>
PS: Before anyone links me to this, I have tried to understand it and it hasn't worked, so I am asking more specifically. (also that as well)
EDIT: Thank you Teemu, I had to add flex-wrap: wrap to the body ruleset

CSS: How to grow div along with its inner divs

I have this div with three inner divs.
ONE - I am div TWO - I am div THREE - I am div
But in mobile it can only fit two divs in a row horizontally, I need divs after 2nd to step down.
Like this:
ONE - I am div TWO - I am div
THREE - I am div
How do I do this?
I am using flex.
Edit
I have added HTML code.
I am using React and other UI component and I tried to minimize it in HTML. It's something like this right now.
<div class="parent">
<div class="child">
<span>ONE</span>
<p>I am div</p>
</div>
<div class="child">
<p>TWO</p>
<p>I am div</p>
</div>
<div class="child">
<span>THREE</span>
<p>I am div</p>
</div>
<div>
.parent {
display: flex;
justify-content: space-around;
margin-bottom: 3rem;
white-space: nowrap;
}
.child {
display: flex;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}

You can use flex-wrap to continue on the next line. justify-content will center the div
.outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Styles below are for demonstration purposes */
.inner {
height: 50px;
width: 300px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="outer">
<div class="inner red">A</div>
<div class="inner green">B</div>
<div class="inner blue">C</div>
</div>

This will work for responsive layout, and it also permits them to fit in one line, if the screen size allows it. You can use media query to set it for mobile only.
.outer{
display: flex;
flex-flow: wrap;
text-align: center;
}
.inner{
flex-grow: 1;
}

Div goes under first div when page is resized

I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?

You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>

Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container

ScrollTo not working with scroll-snap and 100vh container

When I have a .sections container with several .section elements inside, and setup scroll-snap, it will ONLY work if I give the section a fixed height of 100vh. Without the height, the scroll-snap will not work. This is fine, except without the fixed height, scrollTo works correctly, and when I add the height to the section, scrollTo no longer works.
Here is an example. You can comment out the height: 100vh; line in the .section CSS and see that clicking anywhere will scroll down to section #3, but with the height turned on, it won't scroll.
I have tried to console.log the position it is scrolling to and it is correct, but the scroll never actually takes place. Any ideas as to why this is not behaving the way I would like?
NOTE: I am seeing this behavior in the latest Chrome. I have not tested another browser.
// Click on document to scroll to section 3
document.body.onclick = function() {
console.log('SCROLLING...');
const el = document.getElementById('s3');
const pos = el.getBoundingClientRect();
window.scrollTo(0, pos.top);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.sections {
overflow-y: scroll;
scroll-snap-type: y mandatory;
/**
* Adding the below line breaks scrollto, removing
* it breaks scroll-snap....
*/
height: 100vh;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
border: 5px solid deeppink;
font-size: 30px;
font-weight: bold;
scroll-snap-align: center;
}
<html>
<body>
<div class="sections">
<div class="section" id="s1">SECTION 1</div>
<div class="section" id="s2">SECTION 2</div>
<div class="section" id="s3">SECTION 3</div>
<div class="section" id="s4">SECTION 4</div>
<div class="section" id="s5">SECTION 5</div>
</div>
</body>
</html>

Thanks to #Temani Afif for the comment. They correctly pointed out that I cannot scroll using the body, I need to scroll using the .sections container.
Here is a working example now:
// Click on document to scroll to section 3
document.body.onclick = function() {
console.log('SCROLLING...');
const el = document.getElementById('s3');
const pos = el.getBoundingClientRect();
const sections = document.querySelector('.sections');
sections.scrollTo(0, pos.top);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.sections {
overflow-y: scroll;
scroll-snap-type: y mandatory;
height: 100vh;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
border: 5px solid deeppink;
font-size: 30px;
font-weight: bold;
scroll-snap-align: center;
}
<html>
<body>
<div class="sections">
<div class="section" id="s1">SECTION 1</div>
<div class="section" id="s2">SECTION 2</div>
<div class="section" id="s3">SECTION 3</div>
<div class="section" id="s4">SECTION 4</div>
<div class="section" id="s5">SECTION 5</div>
</div>
</body>
</html>

Show a <div> at bottom right corner without position: absolute

I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?

I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>