Understanding behaviour of overflow scroll inside nested flexbox [duplicate]

Understanding behaviour of overflow scroll inside nested flexbox [duplicate] - css

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 months ago.
<div class="container" style="display: flex; flex-direction: column; height: 30vh; background: yellow">
<div>Heading1</div>
<div style="flex-grow: 1; display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: column">
<div>Heading2</div>
<div class="scroll-container" style="flex-grow: 1; overflow: auto;">
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
</div>
</div>
</div>
<div>
I have a nested flexbox structure in above code. I want to put scroll on div.scroll-container, so I put overflow:auto and flex-grow: 1 on it. But I am getting an overflow instead.
I want to understand why is this happening and why no scroll is there despite overlfow: auto.

I have edited my answer take a look at the code below.
<div class="container" style="display: flex; flex-direction: column; background: yellow">
<div>Heading1</div>
<div style="flex-grow: 1; display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: column">
<div>Heading2</div>
<div class="scroll-container" style="flex-grow: 1; max-height: 30vh; overflow: auto;">
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
<div>scroll me</div>
</div>
</div>
</div>
<div>

Related

CSS flex shrink images in column

How do I automatically shrink flex child's height in flex-direction: column so they all fit in parent's height?
I tried flex-shrink but it didn't help.
Is it even possible?
Thank you in advance!
Edit
Edited the title.
Children are images, I need to automatically change their height so they fit within parent and cause no overflow.

Try using flex-wrap
.flex {
display: flex;
flex-wrap: wrap;
}
.bloc {
width: 200px;
height: 100px;
margin: 5px;
background-color: red;
}
<div class="flex">
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
</div>

Try this:
.flex {
display: flex;
}
.block {
width: 200px;
height: 100px;
margin: 5px;
border: 2px red solid;
max-height: 100%;
}
<div class="flex">
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
</div>

Flex wrap layout and parent width [duplicate]

This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 2 years ago.
Either I'm missing something or this is just how flex works.
Given a wrapping flex container with a max-width as children wrap the parents width remains at the max-width even though by wrapping the children the width could be reduced.
This makes it impossible to align the container to the center of it's container.
Here's a codepen illustrating the issue:
https://codepen.io/rsouthgate/pen/PozPyXZ
.container {
display: inline-flex;
flex-wrap: wrap;
max-width: 300px;
}
So how can I get the container to not take up the space on the right after the wrap?

Here are some of the possibilities via justify-content, in order: center, space-around, space-between. These all just change how the excess looks. If you want to make the children themselves take up the remaining space, use flex-grow: 1 instead.
You can read up more on css tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.outer {
display: flex;
flex-direction: column;
}
.container {
justify-content: center;
background: grey;
display: inline-flex;
margin: 0 auto 10px;
flex-wrap: wrap;
max-width: 300px;
}
.child {
width: 25px;
height: 25px;
background: white;
margin: 5px;
}
.container2 {
justify-content: space-around;
background: grey;
display: inline-flex;
margin: 0 auto 10px;
flex-wrap: wrap;
max-width: 300px;
}
.container3 {
justify-content: space-between;
background: grey;
display: inline-flex;
margin: 0 auto 10px;
flex-wrap: wrap;
max-width: 300px;
}
.container4 {
justify-content: space-between;
background: grey;
display: inline-flex;
margin: 0 auto 10px;
flex-wrap: wrap;
width: 300px;
}
.child-grow {
flex-basis: 25px;
flex-grow: 1;
height: 25px;
background: white;
margin: 5px;
}
center
<div class="outer">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
Space around
<div class="outer">
<div class="container2">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="container2">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
Space between
<div class="outer">
<div class="container3">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="container3">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
Flex grow
<div class="outer">
<div class="container4">
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
</div>
<div class="container4">
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
<div class="child-grow"></div>
</div>
</div>

change order of grid style (masonry)

i have a grid style:
<div class="masonry">
<div class="item">10</div>
<div class="item">9</div>
<div class="item">8</div>
<div class="item">7</div>
<div class="item">6</div>
<div class="item">5</div>
<div class="item">4</div>
<div class="item">3</div>
<div class="item">2</div>
<div class="item">1</div>
</div>
css:
.masonry {
column-count: 5;
column-gap: 1em;
margin-top: 20px;
}
.item {
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
the result is in this picture (items orders by column):
Current image
but i want to order items by row.First, fill in the first row, then second row and etc.like this photo my favorite state

I did with flexbox see below code, I believe this is what you are looking for
.masonry {
margin-top: 20px;
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
flex-wrap: wrap;
}
.item {
margin: 0 0 1em;
width: 20%;
}
<div class="masonry">
<div class="item">10</div>
<div class="item">9</div>
<div class="item">8</div>
<div class="item">7</div>
<div class="item">6</div>
<div class="item">5</div>
<div class="item">4</div>
<div class="item">3</div>
<div class="item">2</div>
<div class="item">1</div>
</div>

Responsive Square grids in Ionic

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>

How do I scale an item in a scroll area without changing the size of the scroll area

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>