Flex-shrink and flex-grow doesn't work together?

Asked Jul 12 '18 at 07:46

Active Jul 12 '18 at 08:17

Viewed 35 times

 #box-container {
    display: flex;
    height: 500px;
  }
  
  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-grow:1;
    flex-shrink:2;

  }
  
  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-grow:2;
    flex-shrink:4;
    flex-basis:200px;

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Hello , could someone explain me why doesn't flex-shrink work in here? I kept trying to change values but it seems like nothing changes. I'm pretty sure there isn't any typo. Thanks in advance.

edited Jul 12 '18 at 08:17

Temani Afif

245,468
26
309
415

asked Jul 12 '18 at 07:46

edga9966

Here is a good guide to understand how [Flexbox works](https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053) – caiovisk Jul 12 '18 at 08:10
flex-shrink work only when the space is exceeded – Temani Afif Jul 12 '18 at 08:16
related : https://stackoverflow.com/questions/49492208/why-is-a-flex-child-limited-to-parent-size/49492522#49492522 – Temani Afif Jul 12 '18 at 08:16
What are you trying to do? – Germano Plebani Jul 12 '18 at 09:48

Flex-shrink and flex-grow doesn't work together?

0 Answers0