html - 内联 block 元素换行时的CSS，父包装器不适合新宽度

Question

如果内容因屏幕宽度而换行，如何让 inline-block 元素适应其内容宽度？

<!-- parent inline-block -->
<div style='display: inline-block;'>
    <div style='display: inline-block; width:200px;'></div>
    <!--
        If this child line breaks, 
        two 200px wide blocks are stacked vertically.
        That should make the parent width 200px,
        but the parent stays much wider than that
    -->
    <div style='display: inline-block; width:200px;'></div>
</div>

我想不出如何表达这个问题，所以听起来很简单，但我整理了一个简单的 JSFiddle 说明。

#wide {
  position: relative;
  width: 100%;
  border: 1px solid black;
  padding: 5px;
}
#narrow {
  position: relative;
  width: 175px;
  border: 1px solid black;
  padding: 5px;
}
.wrap {
  display: inline-block;
  border: 1px solid green;
  margin: auto;
}
.inlineblock {
  display: inline-block;
  vertical-align: top;
  background: red;
  min-width: 100px;
  min-height: 100px;
  border: 1px solid black;
}

<section id='wide'>
  <div class='wrap'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
  </div>
</section>
<p>
  When the red inline-blocks are forced to line break, how do you make a parent with display:inline-block (the green border) snap to fit? How do you get rid of all the extra horiztonal space in the lower green bordered div?
</p>
<section id='narrow'>
  <div class='wrap'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
  </div>
</section>

Answer 1

你不能。默认情况下，inline-block元素有一个 shrink-to-fit width :

The shrink-to-fit width is:
min(max(preferred minimum width, available width), preferred width).

然后，

• 何时preferred minimum width <= preferred width <= available width , 宽度将为 preferred width ，如您所愿。
• 何时available width <= preferred minimum width <= preferred width , 宽度将为 preferred minimum width ，如您所愿。
• 何时preferred minimum width <= available width <= preferred width , 宽度将为 available width ，即使您不喜欢它。

如果你真的不想要这个，我想你可以添加一个 resize使用 JS 事件监听器，并手动设置所需的宽度。