Why flex-shrink doesn't work in inline-flex

Question

Why items dont shrink in inline-flex. But it works fine in normal flex. Maybe it is supposed to work that way, I dont know. Maybe it is somewhere in the spec but I coudn't find anything related. I would be grateful if someone could explain this.

.container {
  width: 100px;
  margin 0 auto;
  margin-top: 100px;
  background-color: green;
}

.inline-flex {
  display: inline-flex;
  margin-bottom: 10px;
}

.flex {
  display: flex;
}

.item {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background-color: blue;
}

<div class="container">
  <div class="inline-flex">
    <div class="item">no-shrink</div>
    <div class="item">no-shrink</div>
    <div class="item">no-shrink</div>
  </div>
  <div class="flex">
    <div class="item">shrink</div>
    <div class="item">shrink</div>
    <div class="item">shrink</div>
  </div>  
</div>

As far as what I've observed, `flex` acts like a `block` to it's surroundings and `inline-flex` acts like an `inline-block` to it's surroundings , but their children behave the same. I never noticed the shrinking anomaly before... — zer00ne, Jun 21 '22 at 07:33

score 0 · Answer 1 · answered Jun 21 '22 at 11:10

As stated before, flex acts like a block and inline-flex like inline-block on the outside and their children behave identically. The flex-items .item are acting totally different when they should appear the same because their behavior is influenced by the flex-container (.flex and .inline-flex). Aside from the flex-containers having different display values, there are no other differences.

Each .item of .inline-flex has retained it's width of 50px
Each .item of .flex has a width of 34.6687px

I still haven't figured out why this is but I have 3 different solutions:

.container is too small, increase it's width.

See Example A

Figure I

.container {
  width: 200px;
/* Increase .container to at least the .offsetWidth of the 3 .item`s */

Change the flex properties of .items or assign min-width

See Example B

Figure II

.B .item {
  flex: 0 0 50px;
  /* OR */
  /* min-width: 50px */
}

*,
::before,
::after {
  box-sizing: border-box;
}

.container {
  width: 100px;
  background-color: green;
}

.A {
  width: 200px;
}

.inline-flex {
  display: inline-flex;
  margin-bottom: 10px;
}

.flex {
  display: flex;
}

.item {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background-color: blue;
}

.B .item {
  flex: 0 0 50px;
  /* OR */
  /* min-width: 50px */
}

h3 {
  margin: 0 0 4px 0
}

<h3>OP</h3>
<div class="container">
  <div class="inline-flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
  <div class="flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
</div>
<h3>Example A</h3>
<div class="container A">
  <div class="inline-flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
  <div class="flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
</div>
<h3>Example B</h3>
<div class="container B">
  <div class="inline-flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
  <div class="flex">
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
    <div class="item">XXX XXX</div>
  </div>
</div>

Why flex-shrink doesn't work in inline-flex

1 Answers1