Menu
I'm trying to use flex to create flex-items of same width, but they keep changing width depending on number of children in flex-item
fiddle
As you can see, the right green container is much smaller, even though both have flex-grow:1
How can I fix this? Thanks!
span {
display: inline-block;
width: 10px;
height: 30px;
border: 1px solid red;
}
.container {
display: flex;
display: -webkit-flex;
border: 1px solid blue;
width: 200px;
padding: 2px;
}
.item {
flex-grow: 1;
-webkit-flex-grow: 1;
border: 1px solid green;
}
253
You have to add a wrapper around the right column, and then only specify flex-basis on the . menu element. Now when the menu is hidden, the right column expands the full amount. Great, that works as expected!
The flex-shrink property. The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.
When there's more than one element inside a flex container, width and height don't shrink when changing window size. Apparently the fix for #1157, adding a 100% with for the inner container and the SVG, also works for flex box width, but not height:
Firstly, you can’t apply a fixed width AND flex-grow. Secondly, flex-grow only works if the parent element has display:flex. In this case the section has display flex but the links do not and the flexgrow divs are children of the link…not the section.
With a single line of CSS. we can make this responsive. By adding this line of code to the items in the flex container, we tell the flex items in each row to grow in width to fill up the remaining space. However, a problem occurs when there is an uneven amount of items per row:
You need to add width: 0 to make columns equal if contents of the items make it grow bigger. Show activity on this post. The accepted answer by Adam ( flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.
using flex:1 instead of flex-grow:1 seems to fix the issue.
164
This is because flex-basis defaults to auto, which factors in the width of the element. To keep your elements the same with, you need to explicitly set flex-basis: 0:
.item {
flex-basis: 0;
flex-grow: 1;
}
See: https://jsfiddle.net/Wexcode/Lgqhcr07/
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
