为什么CSS中的inline-block会产生奇怪的间距问题？

Question

https://jsfiddle.net/dm05xe9y/

我想了解为什么div无法环绕内联块元素（在这种情况下为按钮）。

html

<div class="flex">
  <div class="first">First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First Firsta</div>
  <div class="wrap">
    <button>Hello</button>
    <button>Hey</button>
  </div>
</div>

css

.flex {
  display: flex;
}
.first {
  margin-right: auto;
}
.wrap {
  background: #833;
}

编辑：您需要最大程度地限制浏览器部分的大小，以查看右侧的红色间距。

Answer 1

留给浏览器来确定flexbox元素。

尝试更改窗口的宽度，然后查看其变化。

此信息可能会对您有所帮助。 How to set a fixed width column with CSS flexbox

Answer 2

在按钮之间添加<br>或将display:block设置为按钮

.flex {
  display: flex;
}

.first {
  margin-right: auto;
}

.wrap {
  background: #833;
}

.wrap button {
  display: block;
}

<div class="flex">
  <div class="first">First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First Firsta</div>
  <div class="wrap">
    <button>Hello</button>
    <button>Hey</button>
  </div>
</div>