I have an application with layers containing the following properties related to layout, each line is a layer. I've added relevant properties to positioning/display.
1. display: grid
2. display: flex
3. position: fixed, 100vh
4. display: flex, overflow: hidden
5. display: flex
6. display: flex
--------------- Splits into two columns, each one should scroll independently
7. display: flex, flex-grow: 1, overflow-y: scroll
8. display: flex, flex-grow: 1
The issue I'm seeing is that a few users are unable to scroll to the bottom of the children starting after the point where it splits into two columns. They can scroll partially, but about 30% of the remainder gets stuck off-screen.
I have been searching through chrome updates/issues related to the min-height: auto changes and cannot nail down the cause. I am completely unable to reproduce and am having a very hard time determining differences in the users' setup and my own.
Are there any known issue with nested flexboxes that would lead to one of the children be unable to scroll fully for some chrome users?
All theories so far have been relating to nesting of flexboxes causing a child at some level to not be contained, thus the hidden overflow of scrolling content.
I could use a new lead on any similar issues/workarounds/anything! Thanks!
Related
Simple code on code sandbox, which compares two cards I'm building. The first card is just a placeholder to organize the flexbox and configure the hover effect. And the second one does make reference to images.
I'm trying to understand why the images are getting bigger than the box-contrained from the first parent - since I'm using object-fit: cover. Can anybody explain me why?
I understand what is happening. FlexBox and images can sometimes work weird. But it's only weird because there's a lot of params to be track of and not because it is a broken feature.
Going into firefox dev tools, I saw that the second card had its header clamped by its minimum size, since the default configuration in flexbox is "A flex item cannot be smaller than the size of its content along the main axis".
The img element said to my flexbox column axis: "hey, I need more space", so my flexbox said: "sure". Now, putting into the header class:
min-width: 0;
min-height: 0;
overflow: hidden;
my flexbox answers: "sorry, but here we are allowed to go beyond minimum size. Deal with it".
This link helped to understand that.
Per the MDN docs for the overflow property:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.
This seems to border on useless (the prime scenario for the overflow-x and -y properties seems that it would be to set them to opposing values, no?) and necessitates hacks or wrappers. However it's not a new complaint, so I won't belabor the point.
This seems to be the best solution I've managed to find and is the one that I've settled for. At this point, I've given up on the "elegant" solution I'd like to have and am just curious to see if a solution even exists.
Is it possible to have a grid based sidebar+content set up without using position: fixed and setting a fixed width on the sidebar?
Here is a fiddle demonstrating the issue. The main goal here is to allow the sidebar contents to scroll on a short viewport while also adhering to the min-content of the grid-template-columns layout.
In the example code below I have a complex structure of nested containers which represents blue boxes in flex containers. The whole thing is nested ina scroll container.
The issue is that the blue containers are squished on Safari:
There are lots of examples here on SO which concern such an issue. The accepted solution in most of them is to add flex-shrink: 0;
In my case, this would mean adding flex-shrink to the .stackchild and #StackChild. This is a styled react component but for the sake of the example, the random CSS classes are replaced with a class and id just to be distinguished.
When I add flex-shrink: 0 to the stackchild I get another layout issue on all browsers:
Tbh I'm not quite sure what's going on here ...
Any idea why does the shrink prop break the layout in this way? And how to solve this so that all browsers are happy?
Code example here: https://codepen.io/pollx/pen/oNbmEoE
Setting a min height alongside stack child appears to work.
https://github.com/philipwalton/flexbugs
.stackchild {
display: inline-flex;
margin-top: calc(16px / 2);
margin-bottom: calc(16px / 2);
min-height: 0;
flex-shrink: 0;
}
https://codepen.io/jspenc/pen/rNxEOme
First thing: I'm not a frontend programmer, but sometimes the only way is become one.
So I was thinking about behavior of flex or flexbox. Probably the way I use it is bad, if so, please let me know. Thanks.
To the problem:
I tried to write basic layout using flexbox, but I found a problem.
Honestly I don't know if it is a bug or my expectations are too high, but I expect same behavior from these cases below.
https://jsfiddle.net/bargl_vojtech/upvb1Lgk/7/
https://jsfiddle.net/bargl_vojtech/h7eokuua/1/
https://jsfiddle.net/bargl_vojtech/q0kegr8o/1/
They are similar, but if you look closer, you can see change in main and #inside-main in css and #wrapper in html
Simple info:
main - part of view
#main-header - header for content (example: fixed title)
#main-content - scrollbox
#inside-main - endless content
I expect second case to be just like first case in behavior, can someone tell me why it is not same?
Thanks for reply.
My expectation: main has flex: 1, so it should be resize to rest of parent size, but somehow #inside-main tells #main-content to resize itself (because it expected in most cases... bigger inner div should resize smaller parent div to same size), and because #main-content is now bigger than its parent it resize him, and so on, but should not this be ignored by overflow: hidden/scroll?
Flex items, by default, cannot shrink below the size of their content. That's why your content element is overflowing the container.
The initial setting on flex items is min-height: auto (in column container) and min-width: auto (in row container).
To override these defaults use min-height: 0, min-width: 0, or overflow with any value except visible.
Add this to your code:
main {
background-color: red;
flex: 1;
overflow-y: auto; /* NEW */
}
For a complete explanation see these posts:
Why doesn't flex item shrink past content size?
min-width rendering differently in flex-direction: row and flex-direction: column
I'm trying to implement a windows 8 app using HTML/CSS with two flexbox layouts of articles (one on top of the other on the y-axis), that are set to overflow-x: scroll. However, I want an expanded view of an article to encompass the whole screen, overlaying the other flexbox container, by using the z-index property of the article. However, it's not working. I don't think that this is IE10/Win 8 exclusive, I think its a problem with my CSS somewhere as its not working in the jsFiddle with webkit flexbox properties.
See this jsFiddle for an example. As you can see, the expanded article still lies under the other flexbox container.
Any help please? I have been looking for this for some time now and cannot find the root of the problem.
I Think this current approach is a dead end.
As I understand, a flex box item expands (or shrinks) given the container's size, thus, a full screen should be impossible if the container is smaller.