Horizontally scrollable div inside full width div [duplicate] - html

Question

This question already has answers here:
Make content horizontally scroll inside a div
(5 answers)
CSS Flex - I have a list of items can need to make them horizontally scroll with overflow hidden
(1 answer)
How can i make this flexbox container scroll instead of adapting the width?
(1 answer)
Closed 5 years ago.
I have a division which horizontally fits the screen inside which I have 5 divisons, I want 4 divisions to appear on screen and 1 division to appear when I scroll the division horizontally. And I want the scrollbar to appear inside the div only and not on the browser window.
Below is my non working code which puts the h1 tag in the left, I want it on the top-left then under it all 5 divs
.outer {
overflow-x: scroll;
width: 100%;
}
.inner {
width: 25%;
float: left;
}
<div class="outer">
<h1>Header Title</h1>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>

Answer 1

You can do it with Flexbox:
.outer {
display: flex; /* displays flex-items (children) inline */
overflow-x: auto;
}
.inner {
flex: 0 0 25%; /* doesn't grow nor shrink, initial width set to 25% of the parent's */
height: 1em; /* just for demo */
}
<div class="outer">
<div class="inner" style="background: red"></div>
<div class="inner" style="background: green"></div>
<div class="inner" style="background: blue"></div>
<div class="inner" style="background: yellow"></div>
<div class="inner" style="background: orange"></div>
</div>
Solution with the h1 element:
.outer {
display: flex;
flex-direction: column;
overflow-x: auto;
}
.middle {
display: flex;
flex: 1;
}
.inner {
flex: 0 0 25%;
height: 1em;
}
<div class="outer">
<h1>Header Title</h1>
<div class="middle">
<div class="inner" style="background:red"></div>
<div class="inner" style="background:green"></div>
<div class="inner" style="background:blue"></div>
<div class="inner" style="background:yellow"></div>
<div class="inner" style="background:orange"></div>
</div>
</div>

Answer 2

I'm not sure if I've misunderstood you, but I think that what you want to do is have the H1 over the 5 div, like this:
https://jsfiddle.net/p78L2bka/
.outer {
display: flex;
overflow-x: scroll;
}
.middle {
display: flex;
width: 100%;
}
.inner {
flex: 0 0 25%;
height: 100px;
}
<h1>Header Title</h1>
<div class="outer">
<div class="middle">
<div class="inner" style="background: red">
1
</div>
<div class="inner" style="background: green">
2
</div>
<div class="inner" style="background: blue">
3
</div>
<div class="inner" style="background: yellow">
4
</div>
<div class="inner" style="background: orange">
5
</div>
</div>
</div>