I have this layout. A container div set to
.container {
width: 80vw;
max-height: 75vh;
margin: auto;}
Inside that is a panel div with header and body divs, then my nested flexboxes. See image below:
The main flexbox div is set to row, with 2 divs in it which are flexbox column.
Inside those there is one div each which has overflow-y set to scroll, and they both have a lot of content.
This is working perfectly in Chrome and Safari, but in IE11 the scrolling divs do not scroll -- they go to the full height of their content and spill out of the container.
To be clear: only those divs in yellow should scroll.
What am I missing here?
Update
I have created a stripped-down pen: http://codepen.io/smlombardi/pen/reodZE?editors=1100
I see this question already has an accepted answer, but that solution didn't work for me. Something else did so I thought I would share for anyone encountering this in future.
My layout was very similar to this. There was a lot of nesting. Getting it to work in Chrome was quite straight forward. However, getting it to work in Firefox would take me another day of research & experimentation. In hindsight, it was probably because I didn't understand flex-box well enough.
To get a more complicated flex-box layout working cross-browser (by working, I mean flex children scrolling for overflowing content), do the following:
give outermost container a predefined height
use Flexbox for all containers that wrap the scrollable container
Since content lays vertically on the page by default, it's recommended to use: flex-direction: column
for Firefox: explicitly set min-height: 0 for every flex-item parent all the way up to the outermost flex-box.
if you have multiple flex children and the child that will scroll needs to expand to fill all available space, use flex-grow: 1
I got this from an article by Stephen Bunch, which I think was originally posted somewhere on SO too. Kudos to him!
Still, your scrolling flex child container will not work in IE11. It will expand to the full height of the contained content.
To fix it in IE11, do this:
Add overflow: hidden; to all its parents
Thanks to the original poster geon on SO in another related question.
Also, having a diagram of the flex layout was vastly more helpful than giant walls of code while researching to fix my own flex layout issues. Thanks OP!
Hoped that helped. It certainly did for me. All my flex-box issues for this more complicated layout.
PS: if this didn't solve it for you, maybe consider this list of flex-box bugs and their workarounds / solutions: https://github.com/philipwalton/flexbugs
Not sure if this is the best way, but I simplified this down to a simple bootstrap row, 2 columns.
I set the container to 75vh, and the 2 columns to the same 75vh.
The key was to set the 2 scrolling divs to flex-basis: something rem:
.search-results {
overflow-y: scroll;
margin-bottom: 10px;
flex-basis: 10rem;
background-color: #c4decf;
}
.accordions {
overflow-y: scroll;
overflow-x: hidden;
flex-basis: 40rem;
flex-grow: 1;
background-color: #f0f0f0;
padding: 10px;
}
See updated codepen: http://codepen.io/smlombardi/pen/WwLgyV?editors=1100
None of the answers here worked for me.
My experience with IE is that both inheritance and properties needs to be set explicitly a lot of the time and the same was true here.
The fix in my case was then to set the max height of container element to 90vh and overflow-y to hidden.
The child element (scroll element) was set to inherit the max-height with overflow-y set to auto. Simply setting it to 100% did not work, really the keyword was "inherit"
all other parent elements got overflow hidden
Related
I have a problem that I have spent many hours on and could not find a solution in any way. I will link the code in CodePen. It is just a subset of my layout. This is the reason for some of the root element's styling.
I basically have a layout where the page/screen/window should not have a scroll, but the inner body of the table widget should, when there are enough elements that go beyond the expected area of the table.
Basically I have a top content on the page, and a table widget. The table widget is to take up the rest of the space of the screen. The table has a title and a header. The body is to take up the rest of the table space and to have a scroll when it has elements that go beyond that space.
I have searched many resources over stack-overflow and tried many things. I will provide the current state of the layout in the pen. Here you can see all that I think is my best try.
https://codepen.io/anon/pen/KLogbJ
The central area of interest is the .body element. Based on things I've read I have styled it:
.body {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
padding: 0.5rem;
min-height: 0;
}
I would appreciate any help on this.
You could add overflow: scroll; to .body and give the .item a min-height
Also give your .table a max-height: 100%;
See this fiddle
The problem is that the contents of the area you want to scroll is set to scale to fit it's container. For the internal scroll you are looking for you would need to have:
A set height for the container so it won't expand to fit the content (in this case you want it to be 100% of the screen)
The content must not scale in height to fit it's container. It has to maintain it's height so that it remain larger than it's container.
If you have those 2 conditions you should find the scroll bars appear.
I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
I'm trying to stack 2 divs of variable height one on top of the other. Both divs combined should not exceed the container height. The 2nd div should allow scrolling if it gets too big.
I've done some research on how to make a div take the remaining height and it pointed me towards display: table-row. I can't use absolute positioning because I don't know what the height of the 1st div will be as it is also variable.
The problem appears to be that the table will always expand vertically with the content unless I use a fixed height on one of the divs.
Here's a JSBin of the problem: http://jsbin.com/heyam/3/edit?html,css,output
It works fine in Chrome but doesn't work in any other browser. I've read dozens of threads on SO with similar problems but none of the answers gave me a working solution. My browser support includes the latest versions of FF, Chrome, Safari and IE9+.
Is there a CSS-only solution to this problem or am I stuck using JS on this one?
.slideout {
display: table;
float:right;
width: 200px;
height: 100%;
background: blue;
}
Consider the following piece of code:
HTML:
<div>
<img src="http://placehold.it/600x150" />
</div>
CSS:
div { max-width: 200px }
img { max-width: 100% }
The image will never be wider than 200px, regardless of its native size. So far so good.
Here's the fiddle: http://jsfiddle.net/PeAAb/
However, if the parent element has its display set to table:
div { max-width: 200px; display: table }
the image magically expands to its native width, expanding the table with it.
Here's the fiddle: http://jsfiddle.net/PeAAb/1/
Same happens with an actual table: http://jsfiddle.net/PeAAb/2/
Question: Is this expected behavior? If so, what can be done to work around this issue?
Setting the parent's width (even a percentage-based width) instead of max-width correctly squeezes the image back into its box, but is not a solution. I need the parent to be fluid (I'm using this for the main structure of the site, so that I can have the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width).
Also, setting table-layout to fixed seems to have no effect here.
The problem here is that a table (or a div set to behave like a table) is not a block element, and max-width only applies to block elements. My only suggestion to you is to wrap the table element in a div with display: block; set.
Here's the fiddle in case you're interested: http://jsfiddle.net/PeAAb/4/
I know this is pretty late, but found the answer, which turned out to be pretty simple and super easy, table-layout: fixed.
Found here: http://blog.room34.com/archives/5042
Anyway, this is for those looking for an answer to this conundrum as I was.
I know that setting margin: 0 auto; on an element is used to centre it (left-right). However, I know that the element and its parent must meet certain criteria for the auto margin to work, and I can never seem to get the magic right.
So my question is simple: what CSS properties have to be set on an element and its parent in order for margin: 0 auto; to left-right centre the child?
Off the top of my head:
The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position1
Off the top of other people's heads:
The element must have a width that is not auto2
Note that all of these conditions must be true of the element being centered for it to work.
1 There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it will center with auto margins.
2 Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".
Off the top of my head, it needs a width. You need to specify the width of the container you are centering (not the parent width).
Complete rule for CSS:
(display: block AND width not auto) OR display: table
float: none
position: relative OR position: static
OR
parent element with display: flex
Off the top of my cat's head, make sure the div you're trying to center is not set to width: 100%.
If it is, then the rules set on the child divs are what will matter.
Off the top of my head, if the element is not a block element - make it so.
and then give it a width.
It will also work with display:table - a useful display property in this case because it doesn't require a width to be set. (I know this post is 5 years old, but it's still relevant to passers-by ;)
Here is my Suggestion:
First:
1. Add display: block or table
2. Add position: relative
3. Add width:(percentage also works fine)
Second:
if above trick not works then you have to add float:none;
Please go to this quick example I've created jsFiddle. Hopefull it's easy to understand. You can use a wrapper div with the width of the site to center align. The reason you must put width is that so browser knows you are not going for a liquid layout.
It's perhaps interesting that you do not have to specify width for a <button> element to make it work - just make sure it has display:block : http://jsfiddle.net/muhuyttr/
In case you don't have a fixed width for your parent element, having your parent element with display: flex worked for me.
For anybody just now hitting this question, and not being able to fix margin: 0 auto, here's something I discovered you may find useful: a table element with no specified width must have display: table and not display: block in order for margin: auto to do work. This may be obvious to some, as the combination of display: block and the default width value will give a table which expands to fill its container, but if you want the table to take it's "natural" width and be centered, you need display: table