为什么多行跨度会改变相邻 div 的宽度？ [复制]

Question

我的反应代码：

<InfoWrapper>
  <InfoCircle>
    <span>i</span>
  </InfoCircle>
  <span className="info-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    elit.
  </span>
</InfoWrapper>

这样正确渲染：

信息圈的大小为 28x28。

但如果我添加更多文本以使跨度扩展到多行，则信息圈的大小将变为 16.5x28：

我在InfoWrapper 上没有设置任何收缩规则，因为我将align-items 设置为flex-start，这样项目就不会垂直拉伸。

这是一个包含完整代码的 sn-p：

span {
  font-size: 0.875rem;
}


.info-wrapper {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  margin-top: 1.25rem;
 }

.info-circle {
  align-items: center;
  background-color: #f5f7ff;
  border-radius: 0.875rem;
  display: flex;
  flex-flow: row nowrap;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.info-label {
  font-size: 0.9375rem;
  margin-left: 0.5rem;
}

<div class="info-wrapper">
  <div class="info-circle">
    <span>i</span>
  </div>
  <span class="info-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

Answer 1

您不能将宽度设置为 span 元素。 Span 的属性为display: inline;。将其更改为display: block; 或display: inline-block;，因为宽度仅适用于块元素。