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.
Related
In order to make the last div extend according to the height of the viewport,
I used:
body {
display: flex
}
."main-container"{ <---- the last div
flex:1
}
Is there other way getting this result without using flexbox?
Here is my codepen:
https://codepen.io/hadassf/pen/rNJNBpB?editors=1100&fbclid=IwAR3a_hbrJPoeRWnseZlpkv2aBVOS9H1PxTpRqAK24jVper3wjrd5qXQlRpM
I think since its the main container you give it a height of 100% i.e .main-container{ height: 100%;}, because the display:flex is just for telling your parent element (in this case your .main-container), how you want it's child elements to be distributed within it. I hope I got your question correct.
vh is for viewport height, you can give 100vh if you want to size within viewport height.
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
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 want to do this without JavaScript. I already have a JS solution but want to know if this is possible with pure CSS.
Let's say you have a page showing products off. When the page resizes I want to have those product boxes flex with the page layout. Each one should have a max-width and min-width. A table won't work because I can't have a fixed number of columns. Depending on the browser width, there could be between 1 to 6 products on a single row. The following doesn't work, but it's the closest I've got.
#prducts > div {
float: left;
max-width: 200px;
width: auto;
min-width: 100px;
background-color: #3333FF;
height: 250px;
margin: 5px;
}
Here's the fiddle: http://jsfiddle.net/79CBq/2/
Is it possible to make a DIV do auto width and still adhere to the min/max values I set? Unfortunately width: auto only changes the width if there is content inside making it bigger.
This is just really dumb to me, because a DIV with "display: block" has the right kind of auto-width but I can't find an option to give that to an inline-block or float DIV.
What you want is a grid-system.
For your information: you can set the width of your divs in percentage (based on the width of the parent container).
If you want all <div> elements in #prducts to be 1/6 of the screen width, you should remove the width of prducts (set it to auto) and then do this:
#prducts > div {
width: 16.666%;
}
Beside the typo in #products you should know that you are using the id identifier. You can only have one html element width the id "products". If you plan to have more then one, you should change that to a class name.
I don't really unterstand what you want to do in your fiddle. You should not use tables for layout reasons. With my anweser and your fiddle, you will run into problems width the margin of the > div items, which you could easily avoid using a box based layout.
You can use bootstrap grid system, bootstrap takes care of the media queries. You need to give the div classes such as "col-md- " depending on the columnwidth and the screens you want to support. If you do not want to use the full library you could mimic bootstrap implementation for fluidic layouts.
http://getbootstrap.com/css/
I am trying to convert my table design to css div design.
What does not work:
1.)
The black div will have list items therefore I need scrollbars which is shown at the moment. Thats fine.
But I do not want to limit the height to 400px. My former design had 100% for the height so it takes all vertical space on the screen.
2.) The red div (rightContent) should have a fixed width of 200px; When I set this what do I have to set, that the leftContent takes all horizontal space.
Above all in the old table layout were no outer vertical scrollbar visible around the whole layout.
I tested this on IE9
http://jsfiddle.net/pEMwP/4/
For Question1:
If you want a scrollbar, you should not set the height property to auto. Instead you can dynamically set the Div height via Javascript like this.
document.getElementById("ListData").style.height=<your Size>;
For Question 2:
If you want to set height to Red Div. You can specify like this.
height: 200px;
overflow:hidden;
this will limit the div to 200px. Now you can increase your other div/divs width to occupy this space .
If I was starting something like this from scratch I'd rethink the layout so I didn't have such tight constraints, but as you're converting an existing site I appreciate this might not be an option.
You could use the display: table;, display: table-row; and display: table-cell; declarations to get a semantically correct (it's not tabular data, right?) structure which behaves just like the oft misused <table> of yore. Admittedly, you'd have to implement some work-around for IE6&7 (probably 2-3% of users), but perhaps you could accept that it's usable but imperfect in those browsers?
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/