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
Related
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
I have created a site that uses flexboxes and it is working in most parts, but I have come across an issue with something.
http://kudos.topspindigital.com/#/table-tennis
If you look at the page, the top right panel is cutting off text. This is because the panels below are set to be 1.5 x the height of the one above.
This works fine for this page:
http://kudos.topspindigital.com/#/archery
but as you can see, anything that has 2 lines of text for the header brings the content down.
So my question is 2 things.
Is there a way I can tell my panels to grow to 1.5 x height of the top but allow the top to expand (and let the children shrink).
I tried doing this:
.flex-double {
flex-grow: 1.5;
flex-shrink: 1;
flex-basis: 0;
}
but it had no effect.
Is there a way of forcing the top panel to overflow and get the bottom panels to fill the remaining height?
ok, so I was having problems with this, so I made a codepen with my CSS and tried to solve the issue myself.
Here is the codepen:
http://codepen.io/r3plica/pen/qdPeYp
I have managed to fix the issue by creating a new class called .flex-auto which replaced .flex-double.
It looks like this:
.flex-auto {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
Applying this to the item I want to be just enough height (in this case the top panel) will set it to the correct height and the second panel will then take up the rest of the space.
Yes. Just set your desired flex factor:
flex: 1.5;
And then the Flexbox module changed the initial value of min-height:
4.5 Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items,
this specification introduces a new auto value as the initial
value of the min-width and min-height properties defined in
CSS 2.1.
So the min-height will compute to the content size, which is exactly what you want.
You can see this behavior on Firefox, but Chrome hasn't implemented it yet.
If you want it to overflow, just unset the min-height and add overflow to the appropriate element:
.row {
min-height: 0;
}
.panel-gray {
overflow: auto;
}
As the title suggests, I have two stacking <div>s.
They are placed in an absolutely positioned container that covers the whole page. Basically, those 2 <div>s, taken together, should also cover the whole space of the containier.
Another important aspect is that these <div>s have dynamic content. The bottom one can have a lot of content, so an overflow: auto rule is required. The top one can also have dynamic content, but it's not really expected to grow out of control. Thus, I don't want to cut the overflow.
The main question is: How can the top one affect the other one's height without the risk of overlapping? (I prefer a CSS only solution, or something that wouldn't imply JS pixel values computations)
Here are two images that describe the best what I'm trying to achieve:
"initial state"
a state with some more data in the top div
Here is also a JSfiddle for convenience: http://jsfiddle.net/60qan4t6/
This is the kind of situation that display:flex handles extremely well. Update to your fiddle:
http://jsfiddle.net/60qan4t6/1/
Note, I quickly wrote this, so it's missing browser prefixes to support some browsers, but the fiddle should work in Chrome just fine.
Be sure to see check browser support for flexbox here:
http://caniuse.com/#feat=flexbox
If it's acceptable to set height to div's you can use such an example
.top-area {
background: red;
overflow: hidden;
height: 40%;
}
.bottom-area {
overflow: auto;
height: 60%;
}
http://jsfiddle.net/xqh2vw2g/
So if I take a div and add this to it:
<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>
.dongs {
background-color: blue;
max-width: 500px;
display: inline-block;
}
It will make the div's line up beside each other with a blue background BUT the max width will
appear to not be working for some reason.
The reason why I need max-width to work is because if I have those beside each other and lets say
a user comes a long with a small browser it will resize the div's and squish them in so that they
are smalled which is what max-width does. Allows the container to become smaller but not larger.
However, if I remove the inline-block; the div's wont be next to each other BUT the max-width
will work and they will resize. Please, I need help. Thanks
EDIT: I did research a lot but cannot seem to find the answer. I did see one stackoverflow post but
it did not make sense to me and didnt help. Here
You can achieve what you want by using the below code:
.dongs {
background-color: blue;
max-width: 33%;
display: inline-block;
}
Explanation: Since we are not setting any explicit width at start, the browser will assign the minimum width required to fit the contents of the element for all the elements (like you can see for the 2nd and 3rd div's the width is different based on content). However, setting the max-width: 33% means that the browser at any point of time would only allocate a maximum of 1/3rd of the parent element's (or body if no other parent) width to this element. So, if the content is anything more it would start wrapping around.
You would also want to set either overflow: hidden; or word-wrap: break-word; in addition. The first makes the overflowing content get hidden (would be helpful when they are very lengthy words) while the second break's lengthy words and then wraps it around to the next lines. Either one can be used depending on the needs.
Demo | W3C Spec for Min/Max Width
I believe it's because you haven't specify the actual width, and instead of using display: inline-block, it would be better to use float: left and add some margin if you need any space between those div. But, don't forget to change the width property.
Check out my JSFiddle...
I'm using the latest flexible box spec (currently only supported by the latest Chrome as far as I know) and am trying to stop the flex items from exceeding a maximum height.
Best explained with an example: http://jsbin.com/efedof/2/edit
The first examples .content (plus the two .bar elements) does not exceed the height of 300px, so is correct. But with the second example the text pushes the bottom of .content down, outside of the .box div.
How do I enforce a maximum total height of the three combined flex items, so that the .content area becomes scrollable instead of stretching outside of the .box and pushing the .bar out of the .box?
Thanks.
Found the answer!. Trick is to add min-height: 0; to the .content div.