When we give a fixed width to an element why it is taking less that that fixed width when its nearby content is changing in case of display flex

Question

I have a label and button, and I have given a fixed width to the button, if label text is less, it is taking given width but when label text increased button is taking less width.

Why is it happening ?

I didn't gave any width to label.

HTML

<div>
  <label>Some text now this text is incrasinf </label>
  <button>Button</button>
</div>

CSS

div {
  border: solid green;
  width: 200px;
  display: flex;
}

label {
    border: solid blue;
    display: flex;
    flex-grow:1;
}

button {
  width: 100px;
}

When label text is small button is taking 100px as expected.

When the label text increased button is taking less than 100px (unexpected for me)

Codepen Link https://codepen.io/anon/pen/OGmMpd

score 3 · Accepted Answer · answered Apr 11 '19 at 04:39

Add flex-shrink: 0 to the button - the default is flex-shrink: 1 and so according to the change in content flex items can shrink.

See demo below:

div {
  border: solid green;
  width: 200px;
  display: flex;
}

label {
  border: solid blue;
  display: flex;
  flex-grow: 1;
}

button {
  width: 100px;
  flex-shrink: 0; /* added */
}

<div>
  <label>Some text now this text is incrasinf </label>
  <button>Button</button>
</div>

When we give a fixed width to an element why it is taking less that that fixed width when its nearby content is changing in case of display flex

1 Answers1