Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flex-shrink not working as expected

Tags:

html

css

flexbox

I'm starting to work with flexbox, and, in order to understand flex-grow and flex-shrink, I used a simple program that displays two blocks and makes them take up the whole width using flex-grow: 2 in one of them and flex-grow: 1 in the other.

If I check the following line in the console: $(".one").width() === $(window).width() /3 it returns true. So far, so good.

The problem appears when I reduce the window size, because as soon as I do this the same line in the console ($(".one").width() === $(window).width() /3) starts returning false.

I know the default value for flex-shrink is 1. Wouldn't that mean that the proportions between both blocks would be maintained (since they are both being shrunk by the same amount)? Can anyone explain why this result happens?

Here's my code:

* {
  font-family: verdana;
  margin: 0;
}

body {
  background: #eee;
}

.wrapper {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  background-color: white;
}

.box {
  height: 100px;
}

.one {
  background-color: red;
  flex-grow: 1;
}

.two {
  background-color: blue;
  flex-grow: 2;
}
<div class="wrapper">
  <div class="flex-container">
    <div class="box one"></div>
    <div class="box two"></div>
  </div>
</div>
like image 429
Larpee Avatar asked Mar 15 '17 21:03

Larpee


People also ask

Why Flex-grow is not working?

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.

How do I fix my flexbox size?

A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.

What is default Flex shrink?

The default value for flex-shrink is 1 — that means your elements will shrink until you tell them not to! Again, flex-shrink is about proportions. If one box has flex-shrink of 6, and the rest have flex-shrink of 2, the one box will shrink 3x as fast as the rest, as space compresses.

Does Flex Shrink work on images?

You can easily shrink an image by using the flex-wrap property in CSS and it specifies whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked.


1 Answers

While not relevant to your question it might be worth noting:

flex-wrap takes precedence over flex-shrink, unless the item is wider than the container.

  • So if you have flex-wrap enabled and you're expecting two items to shrink to fit side by side on a single row they won't, they'll wrap first even if there's plenty of shrink-potential.
  • If the item is wider than the parent container it can't wrap so it will shrink if it can.
  • You'd have to solve this with min/max widths, make the initial size smaller (this is probably the best way) or creating a new parent container without flex-wrap.

See also Is there any use for flex-shrink when flex-wrap is wrap?

like image 158
Simon_Weaver Avatar answered Sep 23 '22 00:09

Simon_Weaver