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
0
votes
0 answers

How do I stop a flexbox container from growing if I add a relatively positioned element?

I plan on relatively positioning a div inside another div in a flexbox container so as to achieve the following result. In effect, both the photo and relatively positioned div are relative so that I can use their z-index. The parent div of these…
Lennuyé
  • 59
  • 1
  • 1
  • 7
0
votes
1 answer

Why flex-grow in the first div affects the third div?

My understanding about the flex-grow property is that the elements extend to take the space and this taken space is determined by the value of this property. So if we have a flex container that has 3 child divs, the first one has flex-grow: 1, the…
Saher Elgendy
  • 1,519
  • 4
  • 16
  • 27
0
votes
2 answers

Flex how to display table of item that stay aligned vertically

I am working on a website, and this page is the one where I display all the orders the user have. Here is a JSFiddle Containing all the code. .flex { display: flex; } .flex-i { color: white; background-color: blue; …
Ced
  • 1,293
  • 5
  • 23
  • 34
0
votes
2 answers

Empty li using for style only; valid in HTML5?

I want to make an ul that breakes into a few lines with flex-wrap. So far so good but, if there are multiple lines, I want all lines exept the last one to take the rest of the width of the line. So I used flex-grow: 1; on the li's. However as the…
Luka Theisen
  • 181
  • 1
  • 6
0
votes
1 answer

Why flexbox won't grow to its text?

I need .child-1-2 to grow to its text, but the text overflows. When I change flex-basis of .child-1-1 from 50px to auto, it seems to work. Why is that happening? .parent-1 { display: flex; } .child-1 { display: flex; flex: 0 0…
vter
  • 1,881
  • 1
  • 20
  • 38
0
votes
1 answer

Scrollable Flex-box Child issue in IE11/Edge

I'm having an issue in IE11/Edge when trying to set a child of a Flex-box parent scrollable using Flex-grow instead of setting a height.. since in the project I've got I cannot use heights for this type of thing as it would need to be dynamic. Have…
Christian Agius
  • 309
  • 1
  • 4
  • 13
0
votes
1 answer

Explanation for setting "flex:1" or "flex-grow:1" on all ancestor nodes in nested flex layouts given that flex properties are not hierarchical?

I've read several times that to get flex-grow to work as expected you often need to set flex-grow:1 (or flex:1) on the element's parent, its parent, etc, all the way up. This gave me the impression while learning flexbox that it had a hierarchical…
hippietrail
  • 15,848
  • 18
  • 99
  • 158
0
votes
0 answers

using flex grow for creating tournmanet brackets

I am creating a tournmanet bracket with vue, and I am using this code as start point: https://codepen.io/aronduby/pen/qliuj but I am using a v-for for generating the brackets
0
votes
2 answers

Flexbox: flex-grow issues

Could someone help me with this pen? (I'm working with flexbox) https://codepen.io/barbudo/pen/XRMVqX Basically, I'm trying to get the fontawesome icons to grow and occupy all the available space in the row. As they have a .social class, I set this…
gmartinss
  • 19
  • 4
0
votes
1 answer

Chrome 43 Flexbox flex-grow issue

Before Chrome 43, div1 would take up 10% of the container height regardless of its childrens size, and div1 would overflow. As of Chrome 43 div1 doesnt follow flex-grow anyone more and instead grows to its childrens size. Is this supposed to work…
HorseFace
  • 385
  • 3
  • 12
1 2
3