I have flex .wrapper with flex-direction: column.
Then I have 2 flex elements. One of them is .g-main, which also is flex container with element .content inside it.
The troubles with height of .g-main. Why it doesn't stretches automamicly? There is a lot of content inside it.
Related
I want to make a div which is scrollable in x axis and want to render the images with 100% of containers width and scrollable such that a single image will appear in containers view
but I ended up rendering all images in screen view
this is my code
I want all images scrollable but with image width having containers width
Add this to each direct children flex: 0 0 100%;
And this to parent
display: flex;
flex-wrap: nowrap; // this may be the default
overflow: auto;
I got the sollution of my question here when using horizontal scrolling it is not necessary to use flex for aligning content in row we can simply style our scrollable container with
white-space: nowrap
and the each element of container with
display : inline-block
this solved my problem 😀
I have a nested flex layout.
Here is my codepen link https://codepen.io/mendoncafiles/pen/oNoGbPa
There is a flex container, inside which I have list items. Each list item is a flex, with I tag and SPAN tag as flex items. The I tag has flex-basis of 30px.
The text in last list-item is wrapped to next line.
The text is displayed in single line with two options:
remove display: flex from wrapping DIV
Change flex-basis: 30px to width: 30px to I tag.
Expected:
Issue:
It looks like the problem is that the browser is establishing the size of the container before factoring in the full length of the spans.
You can disable flex-shrink or use white-space: nowrap on the spans. But that will cause an overflow.
Consider setting a minimum width on the top level flex container or the ul.
In the following code, if I comment out the align-items line in flex-column, the background is gray and space exists between the icons. If I uncomment the align-items, the background is blue and the icons are centered together.
I've thought of align-items and justify-content as orthogonal to each other - why is align-items affecting a flexbox spacing issue in a child flexbox container? Doesn't the width start at 100%?
I would assume it would only manage its direct children. Further, the entire area is blue when align-items is active, shouldn't I at least see the background of the icons as gray?
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
background-color: blue;
}
.flex-row {
display: inline-flex;
flex-direction: row;
justify-content: space-between;
background-color: gray;
}
<div class="flex-column">
<div>Some Content0</div>
<div>Some Content1</div>
<div class="flex-row" style='border: solid;'>
<img src="update.svg" style="max-width: 20px;">
<img src="update.svg" style="max-width: 20px;">
</div>
<div>Some Content2</div>
<div>Some Content3</div>
</div>
The parent flex container is set to column-direction. This means that the main axis is vertical and the cross axis is horizontal.
The align-items property works only along the cross axis.
So when you set the container to:
align-items: center
... the child (.flex-row) is horizontally centered.
Basically, all free space on either side of the flex item is consumed, causing the item to be centered.
The parent's background color (blue) is displayed because the child's background color (gray) has been squeezed to the center, and lies behind the images.
When you disable align-items: center on the parent, the default stretch value is restored on the child.
The child (.flex-row) is, unlike its parent, a row-direction container. So the main axis is horizontal and the cross axis is perpendicular.
The justify-content property works only along the main axis. So in this case, it works in the same direction as align-items on the parent.
With justify-content: space-between on the child container and align-items: stretch on the parent container, the images and the child's gray background color have access to the full length of the container.
Doesn't the width start at 100%?
Often, yes. But in any case, you've overridden full-length with centering.
Maybe you're thinking that only the content (the images) should be centered and not the flex items. That's not exactly how it works. There are three independent levels in a flex container:
the container
the items
the content
Here's a more complete explanation (it focuses on Grid but the concepts apply to flex, as well):
Centering in CSS Grid
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
On a flex column container the align-items affect the cross axis (horizontal), and with its default value stretch, makes its flex item's fill its width (be 100% wide).
When you change that to center, it will be the items width that control whether they fill its parent's width, and since yours doesn't, they will, as you told them to (align-items: center), center nicely.
If a previous sibling is set to float with a width of 100% and the following sibling set to display: flex, the latter overflow the parent container instead of wrap to a new line.
With any other display value but flex (or grid) it wraps, as it should, so how come it won't when set to flex
.float-left {
float: left;
width: 100%;
}
.display-flex {
display: flex;
background: yellow;
}
/* Demo css */
.container {
max-width: 80%;
margin: auto;
background: white;
}
<div class="container">
<div class="float-left">I'm floating left, with a width of 100%.</div>
<div class="display-flex">'Floating left' takes up 100% of the space, but still i don't go onto a new line?</div>
</div>
The reason a block box appears to wrap when its previous sibling is a float with 100% width is because it's not actually the box that's wrapping, it's its inline content that's wrapping.
The reason this doesn't happen with a flex container is because floats cannot intrude into flex formatting contexts. In fact, the same thing happens with block formatting contexts — if you apply overflow: auto or overflow: hidden to the following sibling without display: flex the following sibling will seem to disappear altogether. (This implies that the first paragraph is true only when the block box does not establish a block formatting context.)
Since your float is 100% width, the flex container's (auto) width is reduced to 0. Its inline descendants don't wrap underneath the float, because those inline descendants are participating in an inline formatting context that's within an anonymous flex item, which itself doesn't wrap since it's the only flex item in the flex container. This flex item is overflowing the flex container; however the flex container itself doesn't overflow the containing block since its used width is 0, allowing it to sit next to the float.
The reason the flex container will wrap if it is display: inline-flex instead of display: flex is because an inline-level flex container behaves just like any other inline-level content, wrapping around a float. In this case, it's the flex container itself that wraps — its inline content is still formatted as an anonymous flex item, because flex layout is identical regardless of whether the flex container itself is inline-level or block-level.
The problem is that the element .display-flex is not a flex item. It is a child element in a standard block container.
Therefore, the flex shorthand property, and its longhand component properties, which apply only to flex items, are having no effect.
However, the width property works on both flex items and containers.
More details here: What are the differences between flex-basis and width?
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 5 years ago.
I have a flexbox with a direct child that is declared with align-items: stretch.
Inside this flexbox's direct child, I would like to have a div container that also uses its parent's full height (by setting height: 100%).
However, the div container won't stretch to 100% height of its parent, unless I also set height: 100% on the flexbox's direct child.
Is it kind of bug? Must I set the flexbox's direct child with align-items: stretch AND height: 100% to achieve what I want? It seem redundant to me.
Here is an example:
html,
body {
margin: 0;
height: 100%;
}
.flexbox {
display: flex;
flex-direction: row;
height: 100%;
background-color: green;
}
.flexbox-child {
// height: 100%; uncommenting this will get it to work
align-items: stretch;
background-color: blue;
}
.flexbox-grand-child {
height: 100%;
background-color: red;
}
<div class="flexbox">
<div class="flexbox-child">
<div class="flexbox-grand-child">
I want to be stretched till the bottom
</div>
</div>
</div>
http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview
Thanks!
It's a complicated case.
Your .flexbox-child is only a flex item, but not a flex container. Therefore, align-items: stretch, which only applies to flex containers, is ignored.
Then, .flexbox-grand-child has a percentage height, which behaves like this:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
The containing block is the flex item (.flexbox-child), which has no explicit height, and its height seems to depend on the content.
However, this dependency is only due to the new min-height: auto. But before taking min-height into account, the height of the flex item will be (due to the initial align-self: stretch) the height of the container, which is specified explicitly, ignoring the content.
Then, Firefox considers that the height of .flexbox-child does not depend on its contents, so height percentages in its children should work. And then your code works.
However, Chrome doesn't think so.
I'm not sure which one does it right. It doesn't help that height is only defined in the old CSS2.1 and in CSS basic box model, which is an inconsistent draft.
To be safe, better set the height of .flexbox-child explicitly. Or make it a flex container.
When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.
Simply apply display: flex to the flex item, which converts it into a flex container, as well. Then default flex properties like align-items: stretch will apply to the children (now flex items).
You wrote:
I would like to have a div container that also uses its parent's full
height...
You don't need to use height: 100% or add align-items: stretch (it's a default rule). Simply add display: flex to .flexbox-child, and .flexbox-grand-child will expand the full available height.
Modified demo: http://plnkr.co/edit/n0Wt3x3CUr1ZfBD2RrGo?p=preview
re: height: 100% possible bug
With regard to the need to specify height: 100% on child elements, I don't see any bug here. Everything seems to conform to the spec. Here's a complete explanation: Working with the CSS height property and percentage values