Flex-Grow Not Working as Expected (Flex Items Don't Have the Widths I Expect)

flex grow not working as described

You need to add flex-grow:1; to .d1 . Because flex-grow determines how the remaining space is divided between flex-items and how much each item receives.

So if you don't set flex-grow for some items, they won't get that space, and you won't get elements' widths as you expect.

.d1{
flex-grow: 1;
}

.parent {

display: flex;

border: 1px solid rgba(0, 0, 0, .5);

height: 300px;

width: 300px;

flex-flow: row wrap;

justify-content: center;

align-items: center;

}

.parent div {

width: 50px;

height: 50px;

background-color: blue;

margin: 1px;

color: white;

text-align: center;

line-height: 50px;

}

.d1 {

flex-grow: 1;

}

.d2 {

flex-grow: 3;

}
<div class="parent">

<div class="d1">1</div>

<div class="d2">2</div>

</div>

flex-grow not sizing flex items as expected

Short Analysis

The problem is that rows 1-3 have two horizontal margins and row 4 only has one.

Sample Image

With horizontal margins at 10px each, row 4 has 10px more free space than the other rows. This throws off the alignment of the columns.

Because flex-grow applies only to free space, and is heavily influenced by content and margins, it's not the most secure way to size flex items.

Try flex-basis instead. Add this to your code:

.button    { flex-basis: 33.33%; }
#number0 { flex-basis: calc(66.67% + 10px); }
* { box-sizing: border-box; }

.numbers {

display: flex;

flex-direction: column;

}

.row {

display: flex;

flex-direction: row;

flex-grow: 1;

justify-content: space-between;

}

.button {

display: flex;

flex-basis: 33.33%;

justify-content: center;

align-items: center;

margin: 5px;

border-radius: 5px;

border: 1px solid gray;

background: rgba(255, 255, 255, 0.2);

cursor: pointer;

}

#number0 { flex-basis: calc(66.67% + 10px); }

* { box-sizing: border-box; }
<div class="numbers">

<div class="row">

<div class="button number" id="number1">1</div>

<div class="button number" id="number2">2</div>

<div class="button number" id="number3">3</div>

</div>

<div class="row">

<div class="button number" id="number4">4</div>

<div class="button number" id="number5">5</div>

<div class="button number" id="number6">6</div>

</div>

<div class="row">

<div class="button number" id="number7">7</div>

<div class="button number" id="number8">8</div>

<div class="button number" id="number9">9</div>

</div>

<div class="row">

<div class="button number" id="number0">0</div>

<div class="button" id="colon">:</div>

</div>

</div>

Flex-shrink not working as expected

flex-shrink is designed to distribute negative free space in the container.

In other words, it only works when flex items are big enough to overflow the container.

You're not having that problem here. There is no negative space. Therefore, I don't believe flex-shrink is having any effect on your layout.

flex-grow is consuming the positive free space and seems to be working fine.

You would need to set a flex-basis or add content to the items to put flex-shrink in play.

https://www.w3.org/TR/css-flexbox-1/#flex-property

Flex-direction column not working as expected

You should look into "flex-grow" which allows flex items to grow if necessary in order to take up as much space as is available in its container. If all flex-items (in your case: .logo, .search, .button) have a flex-grow value of 1, the remaining space in .container will be distributed to its children equally.

Also, you should use

    flex-direction: row;

in your case if you want them to stretch horizontally

Check out this fiddle for reference! https://jsfiddle.net/hgs5w19y/2/

Do I not understand the flex-grow property?

You have to specify a value for flex-basis as well (not specifying this property causes behaviour similar to using the initial value, auto).

Add flex-basis: 0; to both children or just set it with the shorthand:

.flex-item {
flex: 1; /* flex-basis is 0 if omitted */
}
.big {
flex-grow: 3;
}

http://codepen.io/anon/pen/JEcBa

flex vs flex-grow producing different results

When you set only flex-grow, the flex-basis property remains unaffected. It still defaults to flex-basis: auto.

When you use the flex property, flex-basis gets reset to 0.

So flex: 0 is shorthand for flex-grow: 0 and flex-basis: 0. This means 0 width.

With flex-grow: 0 you still have flex-basis: auto.

To understand the difference between flex-basis: 0 and flex-basis: auto, see this post:

  • Make flex-grow expand items based on their original size

flexbox form not filling up full width of available space

Ok I figured it out you do it on the child

.form-container {
background-color: red;
}

.search-form {
display: flex;
align-items: flex-start;
}

.sesrch-form label {
flex-grow: 1;
}
<div class="form-container">
<form role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Test form</span>
<input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
</label>
<input type="submit" class="search-submit button" value="search" />
</form>
</div>

Flexbox: growing div with flex-basis: 0px expands too far when there's lots of content inside it

First of all, you can remove the flex property and you will still get the same result. I am also removing the properties that won't affect the result as well:

<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan; flex-shrink: 0">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
</div>
</div>

<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>

Can I shrink flexbox items into same size when flex items are bigger than the flex container?

I would use display: grid instead of display: flex to achieve this. Here is an example:

.flex-container {

font-size: 12px;

display: grid;

grid-template-columns: 1fr;

grid-template-rows: repeat(2, minmax(minmax(0, auto), 50%));

width: 200px;

height: 500px;

border: 1px solid #dadfe3;

}

.flex-item {

min-height: 0;

overflow: auto;

margin: 0 20px;

}

.flex-item div {

margin: 4px 0;

background-color: #f0f9ff;

color: #2f88ff;

}
<body>

<div class="flex-container">

<div class="flex-item">

<input type="text" placeholder="filter 1">

<div>item content 1</div>

<div>item content 2</div>

<div>item content 3</div>

<div>item content 4</div>

<div>item content 5</div>

<div>item content 6</div>

</div>

<div class="flex-item">

<input type="text" placeholder="filter 2">

<div>item 1</div>

<div>item 2</div>

<div>item 3</div>

<div>item 4</div>

<div>item 5</div>

<div>item 6</div>

<div>item 7</div>

<div>item 8</div>

<div>item 9</div>

<div>item 10</div>

<div>item 11</div>

<div>item 12</div>

<div>item 13</div>

<div>item 14</div>

<div>item 15</div>

</div>

</div>

</body>


Related Topics



Leave a reply



Submit