This codepen looks different on Chrome than on Firefox. The html and css is:
<div class="outer">
<div>header</div>
<div class="grid">
<div class="central">central</div>
</div>
</div>
.outer {
min-height: 200px;
background: lightsalmon;
display: flex;
flex-direction: column;
}
.grid {
display: grid;
flex: 1 1 0%;
}
.central {
/*height: 98%;*/
background: lightcoral;
}
On Chrome, even though the central element's height is always relative to the intermediate elements actual height (when placed with grid or when using a percentage height like the one in comments), but only if is grandparent's height was explicitly set (and even though that height is not what the central element's is calculated in relation to).
(Grid layout seems to have no such issue: If you change the outer element's display from flex to grid it works on Chrome too.)
Is this a bug or is the behaviour not clearly enough defined?
I can't say I understand that I understand's Mozilla's formal definition of percentage heights on this page anyway and I don't know if there's a more rigorous definition.
Related
I'm confused how this works could someone walk me through what exactly happened?
body,
html {
padding: 0;
margin: 0;
height: 100vh;
width: 100%;
}
.chat-break {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.chat-break .line {
border-bottom: 1px solid #ddd;
width: 100%;
}
.chat-break .date {
color: #B5B5B5;
position: absolute;
background-color: #fff;
padding-left: 8px;
padding-right: 8px;
}
<div class="chat-break">
<div class="line">
</div>
<p class="date">Today</p>
</div>
My understanding:
.chat-break flexbox has two elements .line and .date.
...but after using position: absolute on .date its no longer its own element inside the flexbox?
Then why is "Today" being centered on the line?
Preface:
The top, right, bottom, and left properties are collectively referred to as "box inset" properties.
Keep in mind that all CSS properties that aren't explicitly set will have default values that are either "initial" values or inherited values.
So unless explicitly specified otherwise, every element has position: static;.
The initial value for all of the box-inset properties is auto, regardless of their element's position and display property.
But the behaviour of the auto value does depend on the element's position and/or formatting context.
CSS has a lot of surprising and counter-intuitive behaviour.
This is not intentional, but a consequence of how CSS evolved over time over the past ~25 years it's existed.
Originally CSS wasn't capable of any layout control at all, it was only useful for things like font and text styling.
In fact, CSS's main layout features (like flex, grid, etc) weren't added (let alone supported by browsers) until well into the 2010s.
For example, the original 2008 spec for flex was abandoned. It was reinvented in 2011, and not widely supported until 2014.
Why <div class="line"> fills the width of the page:
<div class="chat-break"> has display: flex;, which makes it a flex-parent.
All immediate child elements (with certain exceptions) of a flex-parent, that have position: static, are flex-items.
Therefore<div class="line"> is a flex-item.
Therefore<p class="date"> is not a flex-item because it has position: absolute;.
(Generally speaking) elements with position: absolute; are not subject to their layout-container's layout rules and are re-positioned with absolute-coordinates where the origin is in their-closet-ancestor-element-without-position: static; (yes, that's a mouthful).
This is why position: relative; is being applied to <div class="chat-break">.
Therefore <div class="chat-break"> is a flex-parent with only one flex-item, despite having two element children.
And because it has justify-content: center; it means that its single flex-item (<div class="line">) will be centered.
Also, because <div class="chat-break"> has display: flex; (rather than display: inline-flex) it means that <div class="chat-break"> is a block-level element, so it fills the width of its container, which is <body>, which fills the width of the viewport.
And because <div class="line"> also has width: 100%; (which becomes flex-basis: 100%;) it means the <div class="line"> will fill the width of <div class="chat-break">.
Therefore <body>, <div class="chat-break">, and <div class="line"> (in that order) will fill the width of the viewport.
Why <p class="date"> is centered:
As <p class="date"> uses auto for all its box inset properties (i.e. top, right, etc) with position: absolute; then the computed value of those properties is the same as if <p class="date"> was position: static;.
However, if <p class="date"> was position: static; then it would be a flex-item and would share its flex row with <div class="line"> - which would mean it would be located somewhere off to the right of the line (due to justify-content: center;).
But it's actually centered, because this is a special-case scenario that's specifically specified in the specification...
https://www.w3.org/TR/css-flexbox-1/#abspos-items
4.1. Absolutely-Positioned Flex Children
As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.
The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. For this purpose, auto margins are treated as zero.
It's well-worth reading the rest of the section as it also covers other brain-stretching scenarios, like "what if align-self: center; is used"?
I'm using the method of making a child element 100% the height of its parent that's most commonly given in StackOverflow answers, namely relative-positioning the parent, and then giving the child these styles:
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
But, please take a look at this Codepen implementation of the above. In it, I make the parent element a flex item and the child element a table (or a <div> with display: table). I need to do this for my client's real world design case, partly to vertically align the text in the middle, which I believe only tables can do.
As you can see, it breaks in Safari. But It looks like the CSS should work, and it does in Chrome. Why's it breaking in Safari? How can I fix this?
PS: I'm open to alternative approaches to making the child 100% the height of its flex item parent, if necessary.
If you make the parent display: flex; flex-direction: column; and the child flex-grow:1; it should work.
<div class="parent">
<div class="child">
Content
</div>
</div>
.parent{
display:flex;
flex-direction: column;
background:blue;
height: 300px;
}
.child{
flex-grow:1;
background:red;
display:flex;
align-items:center;
}
Check this code pen
I am trying to get a containing div that is full page-height to expand so that is is always equal to the height of its content.
The overall structure is
search.html
<div class="outer-container">
<div class="inner-container">
<div class="body">
<app-results></app-results>
</div>
</div>
</div>
results.html
<div class="card" *ngFor="let c of content; let index = index">
<h1 class="h">{{index}}</h1>
</div>
I have tried setting the .outer-container to [display: inline-flex][1]; which works really well. Until more cards are added dynamically to the view. At that point, the containing element remains at the same place it was before the dynamic content was inserted, right at the viewport's previous bottom.
I've also tried various permutations of height: auto, and height: 100% on the entire tree of elements, but it seems like when I get the parent's height to work correctly with a batch of children that extends beyond the page, its height shrinks when it is one element; and when it looks good when there is just one element, the parent looks to short when more children are added which overflow the page height.
Also, in my app overflow: auto produces a double scrollbar, so that won't work.
How can I get the full height to persist no matter the number of elements?
More detailed StackBlitz You have to click the "search" link to get to the correct route. (I added angular router to be sure my reproduction was accurate as possible)
I looked at your StackBlitz. I assume that the issue is that when you click 'toggle' the pink background does not extend. If so, all you need to do is add overflow: auto; to your CSS as shown below. I tried it on your StackBlitz and it worked.
.outer-container {
width: 100%;
position: relative;
height: 100%;
display: inline-flex;
flex-direction: column;
background: pink;
overflow: auto;
.inner-container {
height: inherit;
}
}
The overflow property specifies what should happen if content overflows an element's box.
I changed a couple lines on your stackblitz and it seems to be working how you described. You can make the .outer-container height fit-content and min-height 100%:
.outer-container {
width: 100%;
position: relative;
height: fit-content;
min-height: 100%;
display: inline-flex;
flex-direction: column;
background: pink;
.inner-container {
height: inherit;
}
}
I want to have a square div inside a flexbox. So I use:
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50%;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
This works fine in Chrome. But in Firefox, the parent squeezes to just one line.
How do I solve this in Firefox? I use version 44.
You can also view the code at https://jsbin.com/lakoxi/edit?html,css
2018 Update
The flexbox specification has been updated.
4.2. Flex Item Margins and Paddings
Percentage margins and paddings on flex items, like those on block
boxes, are resolved against the inline size of their containing block,
e.g. left/right/top/bottom percentages all resolve against their
containing block’s width in horizontal writing modes.
Original Answer - applies to FF and Edge versions released before 2018
From the flexbox specification:
Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.
Here's some more:
4.2. Flex Item Margins and Paddings
Percentage margins and paddings on flex items can be resolved against either:
their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
the inline axis (left/right/top/bottom percentages all resolve against width)
A User Agent must choose one of these two behaviors.
Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.
In addition to Michael_B's answer, here is a possible workaround.
When using percent we often relate that to the viewport width, so with that in mind, viewport units vw/vh can be an option, since it works similar (responsive).
Stack snippet
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50vw;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
Updated based on a comment
If a square is a must, and viewport units or script can't be used, here is another trick using a dummy image.
Note, as image also a SVG or a Base64 could be used as a datauri to save an extra round trip to the server
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
}
.inner img {
display: block;
width: 100%;
visibility: hidden;
}
<div class="outer">
<div class="inner">
<img src="http://placehold.it/10" alt="">
</div>
</div>
I want to have a square div inside a flexbox. So I use:
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50%;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
This works fine in Chrome. But in Firefox, the parent squeezes to just one line.
How do I solve this in Firefox? I use version 44.
You can also view the code at https://jsbin.com/lakoxi/edit?html,css
2018 Update
The flexbox specification has been updated.
4.2. Flex Item Margins and Paddings
Percentage margins and paddings on flex items, like those on block
boxes, are resolved against the inline size of their containing block,
e.g. left/right/top/bottom percentages all resolve against their
containing block’s width in horizontal writing modes.
Original Answer - applies to FF and Edge versions released before 2018
From the flexbox specification:
Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.
Here's some more:
4.2. Flex Item Margins and Paddings
Percentage margins and paddings on flex items can be resolved against either:
their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
the inline axis (left/right/top/bottom percentages all resolve against width)
A User Agent must choose one of these two behaviors.
Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.
In addition to Michael_B's answer, here is a possible workaround.
When using percent we often relate that to the viewport width, so with that in mind, viewport units vw/vh can be an option, since it works similar (responsive).
Stack snippet
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50vw;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
Updated based on a comment
If a square is a must, and viewport units or script can't be used, here is another trick using a dummy image.
Note, as image also a SVG or a Base64 could be used as a datauri to save an extra round trip to the server
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
}
.inner img {
display: block;
width: 100%;
visibility: hidden;
}
<div class="outer">
<div class="inner">
<img src="http://placehold.it/10" alt="">
</div>
</div>