为什么 flex-shrink 在 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>

Answer 1

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 .item s 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>