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
1
vote
1 answer

Safari nested flex issue

Nested flex box with sibling as flex-grow : 1 and overflow-y : auto doesn't works as expected in Safari [My build 13.1 (14609.1.20.111.8)]. This works great again in Chrome. Attached the screenshots of the both items along with a minimum…
Sai Mukesh
  • 401
  • 4
  • 11
1
vote
1 answer

After pseudo element hidden when using Flexbox

I need two divs taking up 100% width, ideally 50% each (but I am flexible). With an arrow displaying below on the active tab. The flex-grow feature of flexbox doesn't seem to be affecting the placement of the after pseudo-element arrow. In full…
sking
  • 63
  • 5
1
vote
0 answers

Flex-grow behaviour on input is different in browsers

I want to create an inline form which uses 100% width of its parent container and expands the input to fill any unused space. The code I came up with: https://jsfiddle.net/k8Lbm1we/ .container { width: 500px; background-color: #CDCDCD; …
Tom
  • 195
  • 9
1
vote
0 answers

Chrome does not fill a flex-grow container to 100%

I'm trying to make a div fill a flex grow area on my page by using width: 100%; height: 100% to it. It works in all other browsers but Chrome. Can you see what's going wrong. Is this a bug in Chrome? Here's the codepen HTML:

Heading…

Leon Bacud
  • 11
  • 1
1
vote
2 answers

Omitting the flex-grow value in flex shorthand

In this resource: https://www.w3.org/TR/css-flexbox-1/#propdef-flex it says that, when using the flex shorthand, if you omit flex-grow, it is set to 1. But how can you omit it in the first place?
KestVir
  • 300
  • 3
  • 14
1
vote
1 answer

CSS flex grow does not work with added div on top

Consider the following fiddle: https://jsfiddle.net/7naxprzd/1/ Requirements are: two columns with header and contents tops of columns should align bottom of columns should align on top of each column there should be a horizontally centered…
Michiel
  • 160
  • 1
  • 2
  • 15
1
vote
1 answer

Why is my aside not showing at my specified width?

I have used Flex several times with no problem, but I cannot see why this is not working. I have extracted the offending code to a new HTML file and it is still happening. I have a body with a container div which has an aside and section within…
Magnus Tullock
  • 35
  • 5
1
vote
1 answer

flex grow not working as described

I'm a bit confused from my understanding flex grow determines the size of an child based on a portion in relation to its siblings, I an element set to flex-grow two but its clear far more then two. could some direct me to accurate information on…
alexis
  • 387
  • 3
  • 19
1
vote
0 answers

Flex-Wrap Inside Flex-Grow

This question is similar to Flex box with wrap inside another Flex box, but no solution was found. Here's the structure:
// flex wrapper
// flex: 1 1 80%;
// flex: 1 1 20%;
The wrapper's second child…
Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80
1
vote
0 answers

flex-grow:2 not doubling the height of my column

I recently started using flexbox and I really like it but I'm having a little issue with flex-grow when im using flex-grow. Sooo I created this: section#vertical { display: flex; width: 90%; height: 120px; margin: auto; flex-direction:…
Niels
  • 25
  • 5
1
vote
2 answers

flexbox flex grow and overflow

I have created a site that uses flexboxes and it is working in most parts, but I have come across an issue with something. http://kudos.topspindigital.com/#/table-tennis If you look at the page, the top right panel is cutting off text. This is…
r3plica
  • 13,017
  • 23
  • 128
  • 290
1
vote
1 answer

CSS3 Flex: flex-grow + justify-content?

Good day, I have one question Can i use at once flex and justify-content ? i want that "flex-item(s)" have the full size container and simultaneously space between it
0
votes
2 answers

Flex grow works on the element itself but not on the container

I have three divs in a conainter div. The container is 500px in height. Even after setting the flex grow property to 1 (in the container), the divs don't grow but when set on the elements themselves (child divs within container), they do grow. Is…
Yogesh Bhatt
  • 127
  • 2
  • 9
0
votes
1 answer

Flex issue in React Native

Styling help needed and am so bad at "Flex". That icon shows up if a message is long. click it and message expands. need it to be displayed next to time stamp as shown below. code:
grooot
  • 446
  • 2
  • 10
  • 31
0
votes
1 answer

How to prevent overfilled element get smaller than a value of the max-width

I have two div elements, which adjust their sizes dependent on the content in those elements. The problem is that if they both filled with content and I set even more content in the left element, it grows and makes the right element smaller, even…
Mihail
  • 3
  • 3
1
2
3