I feel really stupid for not seeing whats wrong here.
Basically three divs in a row with a container - want all of them to be as high as the container.
Here's a reduced test case:
http://codepen.io/jgclifton/full/mDdpv
Any ideas?
Give div.container an explicit height, and your divs will line up perfectly. Currently, it has a height of auto, meaning that using height: 100% on the child elements has no effect. Setting a height of, say, 200px on the container gives the percentage-based height something to use as a reference.
Container has height: auto;
If you change it to height: 100px; for exemple, every divs have same height to me.
Related
I added a min-height on a div in a flex layout parent. It seems that the min-height impacts the div if its real height is greater than min-height.
Take below code as an example:
https://codepen.io/zhaoyi0113/pen/ejwJGM
I set 100px as min-height on the div but it gets overlay each other if its real height is greater than 100. In above case, I expect the div shows hello world in one block but it doesn't. If you inspect the dom structure you will find that the <p> doesn't extend its parent div height. How can I fix it?
Since you've set height 200px on the .div1 flex box tries to fit all the child elements inside 200px, but the min-height prevents it to fit all children within the 200px.
Depending on what you want to achieve you might want to change the height on the .div1 or add flex-shrink: 0 on .div2
try changing the height of the paragraph to inherit.
p {
height: inherit;
}
this will make it inherit the height from its parent.
see the result here
Alternative solution is to add display: table; to your div2.
Setting max-width style value for images inside carousel breaks width of the container. This happens even though max-width value would not affect actual width of the images. I cannot figure out why this happens.
I created a JSFiddle about this because I'm unable to explain this issue otherwise: https://jsfiddle.net/atmp9ymr/1/
So I'm basically asking why this happens? Is there a way to fix this? Any help would be appreciated.
--
Edit. I try to explain the issue here:
So I have images inline within a container. Container forces items to be inline by using white-space: nowrap and images have inline-block and display style. This container does have position set to absolute if that matters. Everything is fine currently. Container which holds images has correct width (according to images inside). Now if I set max-width: 100% for images, container width is broken. Even if image size does not change, width is not anymore correct. I cannot find a logic for that.
Please check the jsfiddle for better explanation.
Max-Width of the images relates to the containing element.
So max-width: 100% on the image means "use 100% of ".item". .item is not further restricted and by using position:absolute on #inner, you have set this element to 100% (of viewport).
Try adding "border: 1px solid red" to #inner and #container to see, where the elements are drawn.
As long as there is not speciefied what has to happen, wenn sizes exeed the container, this will happen.
Firefox, Opera and Chrome have a workaround for this.
#inner {
position: absolute;
top: 0;
display: flex; /* add display flex */
}
.item {
display: block;
vertical-align: top;
width: -moz-max-content; /* this will stretch the items to maximum width */
width: -webkit-max-content; /* this will stretch the items to maximum width */
width: max-content; /* for future */
}
Have a look at this jsfiddle.
The challenge here is the mixing of percentage widths with inferred (auto) widths, and combining this with absolute positioning.
max-width:100% means the browser has to translate a percentage value into something absolute. This may yield unexpected results if ancestors have width:auto (which by the way is the default), and are absolutely positioned.
In such cases, percentage values make little sense, and 100% might just as well be interpreted as 100% of the element itself – not 100% of the parent/ancestor.
If you want to use percentage values here, you should make sure that the ancestors' widths are clearly set (to something other than auto). However, this might prevent the #inner wrapper from dynamically adjusting its width to wrap all its .item children.
In the end, the easy/ugly solution may be the best: Set the max-width to an absolute value. (For example the pixel width of #container.)
PS: I created a variation of your case. Maybe you'll find it useful.
I'm trying to build a simple layout with fluid values (percentages for height and width). I got a container and a wrapper, but for whatever reason, I can't seem to change the width and height values of the wrapper.
I got a wrapper with the following values:
div.wrapper{
height: 80%;
width: auto;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
As well as a container with the same code but wider. When I remove the overflow: hidden-value, the wrapper will just becomes really thin and not actually "wrap" around any of the internal elements.
Since this is a kind of complicated problem, I posted my entire layout on JSBin:
http://jsbin.com/folaveda/1/
The problem is apparent there as well, as well as all the css that causes it.
You need to set the height property on the container, then you can set the child .wrapper to consume a percentage of its parent's element. Percentage heights and widths are relative to their immediate parent element's dimensions. In your scenario, the parent element is only consuming the dimensions of its children's contents, thus your perceived issue. Adjust the dimensions of the parent/s and you'll have your solution.
note, you'll likely need to set the dimensions on the body and html element explicitly to something like 100%, or a value that's more appropriate for your scenario.
I'm building some tests around height:100%.
On the THIS page you can notice the blue area doesn't stretch its height with the page content, even though it is assigned to have the CSS style of:
height:100%;
Any help on solving or trying to understand this behaviour?
Set height: auto on your body element,
body {
width: 100%;
font-family: sans-serif;
height: auto;
}
Update
Ok, wasn't aware it needs to be 100% despite lesser content.
What you can do is,
give your body some height (say 1000px). And then the 100% on your section will expand to 1000px.
PS: min-height won't work. You'll need to provide a height in px or em.
Although, I'm not very sure on why elements cant figure out 100% of 1000px and NOT 100% of 100%
If you want that section to always be 100% height, you could use min-height: 100% instead of height: 100%. If not, you'll have to give the parent a height (like the html), and then use height: 100%.
the theory behind the behaviour is that if you want to have an element filling the 100% height of a window, you have to make sure that parents of such element also fill 100% of the browser window .
The idea is clear, if you are setting 100% height, you have to ask: 100% of what exactly?
The answer is of a parent.
Of course, this applies to elements without the position: absolute or position: fixed which are not in the "flow" of the document.
An illustration of the problem is very clearly seen in my fiddle: http://jsfiddle.net/AVKnJ/
I hope it enlightens a bit.
EDIT:
is this the desired behaviour?
you indeed have to use height: 100% for containers (html, body) and min-height: 100% for the elements you expect to exceed the height of the window.
http://jsfiddle.net/7jDFD/15/
If a div is 100% width, should I still put in width: 100%;? I look at a lot of code and it's always in there even though by default a div is 100%.
No, doing so can actually cause problems. 100% is not the same as auto. width refers to the width of the content, excluding borders, padding and margins. auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent.
See this for an example
I'm not sure if the children elements will adapt themselfs with procentual values if their parent doesn't have a width attribute. Otherwise it's just semantic and good practice to put width: 100%; if the div is supposed to span 100% of it's parent container.
nope, pretty useless I think to give it a 100% width unless you have a background-color or image or something in this div.