0

The problem is that the first element to which I want to set its base length (which conditionally should be 100px) is somehow reduced.

.main{
  display:flex;
  flex-flow:row nowrap;
}
.item1{
  flex:1 1 100px;
  background:#979797;
}
.item2{
  flex:1 1 auto;
  background:#373737;
}
<div class="main">
 <div class="item1">not 100px</div>
 <div class="item2">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div>
<div>

As I found out that the flex-shrink property was to blame, if you change from 1 to 0 (for item1), then the first element will not participate in compression and it will retain its length, which was originally written to it. The question is why flex-shrink affects the first element if auto is written to the second element?

MaximPro
  • 563
  • 8
  • 21
  • because flex-shrink is set to `1` to all the element so all the element will get reduced ... the negative free space will be split equally to both. Check the duplicate and follow the documentation link to better understand the behavior – Temani Afif Oct 07 '18 at 13:37
  • remove shrink from both element and you will see that you have an overlfow, this overflow is the negative free space and both element absorb it and shrink – Temani Afif Oct 07 '18 at 13:39
  • @TemaniAfif yeah, thx. I already understanded – MaximPro Oct 07 '18 at 18:10

1 Answers1

0

Note: The flex property is isolated to the element on which it is applied. It can't be changed by other siblings.

flex

It is a shorthand for three properties.

flex: [flex-grow] [flex-shrink] [flex-basis] || none;

The default value is 0 1 auto

flex-shrink

It is a property which defines the ability of an element to shrink if necessary.

flex-shrink: 0 signifies that the element is no more able to shrink further than the value of flex-basis or width. Other positive values greater than 0 makes it shrinkable.

In your case, flex: 1 0 100px; for item 1 signifies that the element can't shrink to a width lesser than 100px

The following code alerts 100px as flex-shrink for .item1 is 0.

alert($('.item1').css('width'));
.main{
  display:flex;
  flex-flow:row nowrap;
}
.item1{
  flex:1 0 100px; /* flex-shrink is 0 now */
  background:#979797;
}
.item2{
  flex:1 1 auto;
  background:#373737;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
 <div class="item1">Now 100px</div>
 <div class="item2">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div>
<div>
Community
  • 1
  • 1
vrintle
  • 5,501
  • 2
  • 16
  • 46
  • I know that. But why does the first element shrink? I put the second element `auto`. Why doesn't the first item save 100px? – MaximPro Oct 07 '18 at 13:27
  • @MaximPro I have added a code which alerts `100px` as the value of `.item1` width – vrintle Oct 07 '18 at 13:33
  • You do not understand me so I'm not looking for a working version or the right one. I'm trying to understand why this works. That is why the first block is compressed? For the second block, the remaining space is provided. Does he really miss him? – MaximPro Oct 07 '18 at 13:51
  • *Does he really miss him?* - who is **he** here and whom does he miss? – vrintle Oct 07 '18 at 13:53
  • Oops, sry. I said wrong. I must said: "Does it really have not enough free space?" - its about second block – MaximPro Oct 07 '18 at 14:03