Stack Overflow
Stack Overflow

Questions tagged [flex-grow]

A Flexible Box Layout property in CSS3 and React Native that defines the ratio of the size of the element or component in comparison to its siblings along the "main axis" of its parent. Very often abbreviated to a single-parameter version of the "flex" property.

A Flexible Box Layout property in CSS3 and React Native that defines the ratio of the size of the element or component in comparison to its siblings along the main axis of its parent. Very often abbreviated to a single-parameter version of the flex property.

40 questions
90
votes
1 answer

flex vs flexGrow vs flexShrink vs flexBasis in React Native?

I finally upgraded react native to 0.42 which includes the introduction of flexGrow, flexShrink, and flexBasis and the change (or fix) of how flex is rendered. I keep getting errors like: View was rendered with explicitly set width/height but with…
Dev01
  • 13,292
  • 19
  • 70
  • 124
62
votes
4 answers

Do I not understand the flex-grow property?

I'm afraid I must not understand flex-grow. If you jump to the JSFiddle below - the way I understand it, .big should be three times the size of the other .flex-item. As you can see, not so. Why? http://jsfiddle.net/nrur6mmo/ .flex-container { …
Ethan C
  • 1,408
  • 1
  • 14
  • 26
29
votes
1 answer

flex-grow not working in column layout

I am trying to have the views-cntnr take up any space not used by views-cntnr and menubar divs. To achieve this, I have a flex display set to column direction. Then I set the flex-grow property for the views-cntnr to 1. Doesn't appear to be doing…
Daniel Kobe
  • 9,376
  • 15
  • 62
  • 109
10
votes
1 answer

flex-grow is not working with images

Currently, I'm trying to make a list. On the left side images which fit into my "display flex layout" and resize on all browsers. My "flex-grow layout" list 1 for the image and 3 for the description. Without images, everything is fine, but with my…
ABSimon
  • 651
  • 1
  • 6
  • 18
9
votes
2 answers

Understanding flex-grow

I have 3 divs and if I give flex: 0.5 to first two divs, the last div should move to the next line if I have given flex-wrap: wrap. Please correct if I am wrong. Following is my html / css: .parent { display: flex; height: 100px; …
Harkirat Saluja
  • 7,768
  • 5
  • 47
  • 73
8
votes
5 answers

Same width containers with flex-grow not working

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…
skyisred
  • 6,855
  • 6
  • 37
  • 54
5
votes
2 answers

How to reproduce CSS flex-grow space distribution behavior in a Flutter Row/Column?

I have a Row that looks like this: SizedBox( height: 64, child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded( child: Container( color: Colors.blue, child:…
Tobias Marschall
  • 2,355
  • 3
  • 22
  • 40
5
votes
2 answers

Overflow: hidden not working as expected with Flexbox

I'm trying to build a navigation panel which has a fixed-height primary navbar at the top, a fixed-height secondary navbar fixed to the bottom of the screen, and a container in between which fills the remaining space and is scrollable depending on…
Weardian
  • 211
  • 4
  • 13
4
votes
3 answers

Flex-grow making last row correct width

So I have a flex box containing some boxes. All boxes take up one third of the width. Since I used flex-grow my last element wont stick to size of its column. I understand why this is happening but I dont want to use a max-width as a specified width…
Matt
  • 51
  • 5
4
votes
2 answers

Is there a flex-grow for IE10?

Caniuse states partial support with the -ms- prefix http://caniuse.com/#search=flex-grow as far as I can understand Yet, when testing -ms-flex-grow has no effect in IE10, what am I missing here?
user81993
  • 6,167
  • 6
  • 32
  • 64
2
votes
3 answers

In CSS3, should a flex item with flex-grow 0.1 be taking all the extra space or just 10%?

The following third flex item has a flex-grow of non-zero value, which is 0.1. It might be reasonable and I also read a suggestion that it should take up 100% of any extra space, because the other flex items are 0, and cannot grow. This one is 0.1…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
2
votes
2 answers

Problem using flex-wrap to break to the next row after the 5th element.

I've been working on an image gallery using flexbox with a flex-basis transition to grow and shrink the elements on hover. I am having a problem adapting the gallery to use flex-wrap to break to the next row after the 5th element. The way I'm…
Thomas F.
  • 31
  • 4
2
votes
2 answers

Inconsistent flex-grow in last row with flex-wrap

please look at my very simple example of flex layout: There is container with flex box turned on (display: flex) wrapping (flex-wrap: wrap) some items in it that have flex-grow is set to 1 = all items will scale equally flex-shrink is 0 = any…
pravdomil
  • 2,961
  • 1
  • 24
  • 38
2
votes
0 answers

flex-grow transition with decimal number

I have set the justice-content as flex-end; normal one: .bar flex-grow 0 -> 40 .filler flex-grow 100 -> 60 the bar grows toward top. decimal one: .bar flex-grow 0 -> 0.4 .filler flex-grow 1 -> 0.6 the bar grows toward…
soooooot
  • 1,699
  • 13
  • 18
2
votes
1 answer

Flex-grow not proportionally adjusting width

I'm just getting familiarized with Flex box and when i apply flex-grow:1 to a grouping of columns it seems to be making the column height grow equally but not the widths which is my goal. If i'm understanding this, the default flex-direction is…
dougmays
  • 96
  • 1
  • 9
1
2 3