I want to create responsive square grids in ionic, just like shown in the image above.
But instead, I get something like showing in the image below. I searched the web I can't find any solution that does not involve using images which I am not trying to use.
You can do it in pure CSS :
* {
box-sizing: border-box;
}
.square-container {
padding: 8px;
}
.square {
width: calc(100% / 5);
float: left;
position: relative;
padding-bottom: calc(100% / 5);
}
.square .content {
width: calc(100% - 16px);
height: calc(100% - 16px);
margin: 8px;
padding: 16px;
position: absolute;
color: white;
background-color: #0095ff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
<div class="square-container">
<div class="square">
<div class="content">1</div>
</div>
<div class="square">
<div class="content">2</div>
</div>
<div class="square">
<div class="content">3</div>
</div>
<div class="square">
<div class="content">4</div>
</div>
<div class="square">
<div class="content">5</div>
</div>
<div class="square">
<div class="content">6</div>
</div>
<div class="square">
<div class="content">7</div>
</div>
<div class="square">
<div class="content">8</div>
</div>
<div class="square">
<div class="content">9</div>
</div>
<div class="square">
<div class="content">10</div>
</div>
<div class="square">
<div class="content">11</div>
</div>
<div class="square">
<div class="content">12</div>
</div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
I am trying to order some divs, the idea is that I want to be able to offset them relative to each other to create asymmetrical grid.
All of it is working, until the moment content is added inside.
When a content is added into a div, that div is moved and positioned relative to the content inside it, so that the content is at the top left of the div, I am expecting the opposite behaviour, the div should not move, and the content should move relative to the div.
NOTE: I can not use an outside container to wrap all of them in it.
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
If possible you could achieve the expected behavior by wraping the content inside another div and positioning it using position: absolute
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.column > div {
position: absolute
}
<div class="column red">
<div>
<p>
This breaks it
</p>
</div>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
Why don't you use the old pal float. I still use it over flex and grid often. much easier when simple layouts-
* {box-sizing:border-box;}
.column{
width: 50%;
height: 200px;
float:left;
position:relative;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
Note: I add box-sizing rule becouse I hate that width:49%
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Why is a flex item limited to parent size?
(1 answer)
Closed 2 years ago.
I am creating a layout that contains three parts: sidebar (left), page (center), and summary (right). The left will remain fixed at the width of its inner content when the viewport width decreases, which is the expected behavior.
However, once I add overflow-y: auto to the left container, it loses respect for its inner content width, and completely shrinks along with the viewport width.
How does overflow-y: auto affect an item's flex-shrink behavior? How do I apply an overflow-y while allowing it to continue respecting its inner content width?
.root {
display: flex;
}
.root .sidebar {
border: 8px solid red;
flex: 2;
background: #f3f3f5;
height: 100vh;
display: flex;
justify-content: flex-end;
padding-top: 80px;
position: sticky;
top: 0;
/*
enable this and shrink the viewport
notice how the sidebar shrinks completely
and no longer respects the inner content's fixed width
*/
/*overflow-y: auto;*/
}
.root .page {
border: 8px solid green;
flex: 8;
max-width: 810px;
padding: 80px 80px 160px 80px;
}
#media only screen and (max-width: 1024px) {
.root .page {
padding-right: 40px;
padding-left: 40px;
}
}
.root .summary {
border: 8px solid blue;
flex: 2;
padding-top: 160px;
position: sticky;
top: 0;
align-self: flex-start;
}
.root .actions {
border: 8px solid orange;
position: fixed;
bottom: 0;
padding: 10px;
width: 100%;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.root .actions .inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-basis: 650px;
}
.root .stepper {
border: 4px solid #333;
flex-basis: 320px;
}
.root .stepper .step {
display: flex;
align-items: center;
margin: 0px 70px 40px 40px;
white-space: nowrap;
}
.root .stepper .step .circle {
background: #ffc2d4;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.root .form-stuff {
margin-bottom: 80px;
}
.root .card {
border: 4px solid #333;
align-self: flex-start;
border-radius: 8px;
padding: 10px;
max-width: 280px;
min-width: 180px;
white-space: nowrap;
}
.root .card .title {
margin: 20px 0;
}
.root .card .subtitle {
margin: 20px 0;
font-size: 14px;
}
.root .button {
background: #ffc2d4;
padding: 10px 20px;
}
* {
box-sizing: border-box;
}
<div class="root">
<div class="sidebar">
<div class="stepper">
<div class="step">
<div class="circle">
1
</div>
<div class="title">Step 1</div>
</div>
<div class="step">
<div class="circle">
2
</div>
<div class="title">Step 2</div>
</div>
<div class="step">
<div class="circle">
3
</div>
<div class="title">Step 3</div>
</div>
<div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div>
</div>
</div>
<div class="page">
<div class="form">
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
</div>
</div>
<div class="summary">
<div class="card">
<div class="title">Summary</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
</div>
</div>
<div class="actions">
<div class="inner">
<div class="button">Back</div>
<div class="button">Next</div>
</div>
</div>
</div>
Fiddle:
https://codepen.io/0akd0adk0asdk09asd/pen/QWbaLZa
When the browser is resized, the images are being correctly resized, and the width of the container is changing correctly, but the height of the container is not changing. If I remove height: 375px; the box collapses. How do I make the height responsive like the width currently is?
Basically I need to dynamically set the height: to the automatic width * aspect ratio. The images are always the same size so it's not an issue to use a fixed aspect ratio. I would rather use CSS over javascript to do this if possible.
Alternatively if there is another way to do it based on the background-image that would work too.
This is not a duplicate of Fit div size to background image. Do not close this as a duplicate of that question. That question assumes a static background image size.
<div class="container">
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">c</div>
<div class="bc">g</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
</div>
CSS
.container {
width: 80%;
margin: 1rem auto;
background: #f0f0f0;
min-height: 375px;
padding: 0.1rem;
border-radius: 0.1rem;
display: flex;
justify-content: space-between;
flex-wrap: row;
height: 100%;
}
.card {
flex: 1 1 auto;
flex-flow: row nowrap;
background: url("https://i.imgur.com/q8WyDB6.png") no-repeat;
background-size: 100%;
margin: 0.2rem;
display: flex;
flex-direction: column;
flex-shrink: 1;
max-width: 148px;
max-height: 375px;
min-height: 100%;
color: #fff;
text-shadow: 0 0 4px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, 1);
font-family: "Segoe UI";
}
.card::after {
content: "";
}
.t {
flex: 0 0 auto;
display: flex;
}
.tl {
min-height: 30px;
background: rgba(255, 0, 0, .1);
flex: 0 0 30%;
}
.tr {
flex: 1 1 100%;
background: rgba(0, 0, 255, .1);
font-weight: 600;
font-size: 1.0rem;
text-align: center;
align-self: center;
}
.mc {
height: 100%;
flex: 1 1 100%;
background: rgba(0, 255, 0, .1);
padding: 0.5rem 0.5rem;
}
.bc {
flex: 0 0 auto;
background: rgba(255, 255, 0, .1);
padding: 1.0rem 0.5rem;
}
OK, I accomplished it using Javascript:
https://codepen.io/0akd0adk0asdk09asd/pen/QWbaLZa
A css-only approach would be good, but not sure this is possible.
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
var containerWidth = $('.t').width() * (375/148);
$('#container').css({
height: containerWidth
});
}
I want to draw divs (50 little squares) on 3 lines: 20 on top most row of container,20 bottom row of container and 10 most right column of container.
something like that:
*******
*
*
*******
I tried with flexbox and failed. then I tried something like that and failed:
.board{
position: relative;
height: 445px;
width: 840px;
margin: 100px;
padding: 0;
border: 2px solid rgb(8, 8, 8);
display: block;
background-color: grey;
}
.top-row{
position: absolute;
top: 0;
left: 0;
}
.bottom-row{
position: absolute;
bottom: 0;
left: 0;
}
.right-column{
top: 0;
width: 40px;
height: 40px;
position: absolute;
float: right;
}
the actual is not good. also not responsive as I wish
With flexbox you can try this:
.container {
display:flex;
flex-wrap:wrap;
}
.container > div {
width:calc(100% / 20); /*20 div per row*/
background:red;
border:1px solid;
box-sizing:border-box;
}
/*keep the square ratio*/
.container > div:before {
content:"";
display:block;
padding-top:100%;
}
/**/
/*use a big margin to push to the right from the 21th element*/
.container > div:nth-child(n + 21) {
background:green;
margin-left:calc(100% - 100% / 20);
}
/*reset the margin after the 31th element */
.container > div:nth-child(n + 31) {
background:blue;
margin-left:0;
}
/* Irrelevant styles */
.container {
counter-reset: section;
}
.container > div {
position:relative;
}
.container > div::after {
counter-increment: section;
content: counter(section);
position:absolute;
top:0;
color:#fff;
}
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
Another flex example: I made your blue box larger to indicate numbering.
*,
*:before,
*:after {
box-sizing: border-box;
}
.box {
display: inline-block;
position: relative;
width: auto;
height: auto;
border: 2px solid grey;
background-color: blue;
}
.row-ends {
position: relative;
display: flex;
flex-direction: row;
}
.row-mid {
position: relative;
display: flex;
flex-direction: column;
}
.item {
display: inline;
width: 20px;
height: auto;
text-align: center;
padding: 5px;
background: white;
border: 1px solid purple;
font-size: 9px;
margin-left: auto;
}
<div class="box">
<div class="row-ends">
<div class="item top">1</div>
<div class="item top">2</div>
<div class="item top">3</div>
<div class="item top">4</div>
<div class="item top">5</div>
<div class="item top">6</div>
<div class="item top">7</div>
<div class="item top">8</div>
<div class="item top">9</div>
<div class="item top">10</div>
<div class="item top">11</div>
<div class="item top">11</div>
<div class="item top">13</div>
<div class="item top">14</div>
<div class="item top">15</div>
<div class="item top">16</div>
<div class="item top">17</div>
<div class="item top">18</div>
<div class="item top">19</div>
<div class="item top">20</div>
</div>
<div class="row-mid">
<div class="item top">1</div>
<div class="item top">2</div>
<div class="item top">3</div>
<div class="item top">4</div>
<div class="item top">5</div>
<div class="item top">6</div>
<div class="item top">7</div>
<div class="item top">8</div>
<div class="item top">9</div>
<div class="item top">10</div>
</div>
<div class="row-ends">
<div class="item top">1</div>
<div class="item top">2</div>
<div class="item top">3</div>
<div class="item top">4</div>
<div class="item top">5</div>
<div class="item top">6</div>
<div class="item top">7</div>
<div class="item top">8</div>
<div class="item top">9</div>
<div class="item top">10</div>
<div class="item top">11</div>
<div class="item top">11</div>
<div class="item top">13</div>
<div class="item top">14</div>
<div class="item top">15</div>
<div class="item top">16</div>
<div class="item top">17</div>
<div class="item top">18</div>
<div class="item top">19</div>
<div class="item top">20</div>
</div>
</div>
Or you can try CSS grid.
.container {
display: grid;
grid-template-rows: repeat(12, 1fr);
grid-template-columns: repeat(20, 1fr);
height: 100vh;
}
.top {
background: lightblue;
grid-row-start: 1;
}
.right {
background: red;
grid-column-start: 20;
}
.bottom {
background: green;
grid-row-start: 12;
}
<div class="container">
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
</div>
I have several square items inside a scrollable area. Each item increases in scale by 10% when rolled over. When the group of items is either significantly taller or shorter than the scroll area, everything works fine.
The problem occurs when the height of the items is only slightly shorter than the height of the scrollable area. This only occurs in Chrome. What I think is happening is that when an item increases in size by 10%, the entire div containing the items also increases to larger than the height of the scroll area, at which point the scrollbar flashes on and off.
Gif of scrollbar flashing on and off
Is there anything I can do to prevent this from happening?
Here's a CodePen example: http://codepen.io/anon/pen/VPzoPK?editors=1100#0
And the associated code:
CSS
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: auto;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
HTML
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
Thanks for your help!
Edit: Mentioned that this is a chrome issue
To disable scrolling:
div {
overflow-y: hidden;
}
To force scrolling:
div {
overflow-y: scroll;
}
Fixed css:
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
overflow-y: auto;
width: 300px;
background-color: white;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
For this to work, add additional 2 boxes to your div ;)
<div class="grid__col">
<div class="square_image"></div>
</div>
I think you have two differents approaches to take:
1- Hide your scroll using overflow-y: hidden
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: hidden;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
2- Force the scroll to appear always using overflow: scroll
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: scroll;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
But you should keep a relation between the effect and the size, still when you are not seeing the undesired effect it is still happening.
There is a problem related to the design and the way it looks like in this case.
I Hope to help you.
Either give the .scrollable div more width, to account for the scrollbar appearing:
.scrollable {
width: 330px;
}
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 330px; /* changed from '300px' */
background-color: white;
overflow-y: auto;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
Or simply force the scrollbar to be always visible:
.scrollable {
overflow-y: scroll;
}
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: scroll; /* changed from 'auto' */
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>