如何围绕文本包装的跨度缩小弹性项目？

Question

我甚至不确定这是否可行,我试图找出是否可以缩小文本包装的跨度周围的flex项目.

这就是我现在所处的位置,如果你看第二行,我试图消除文本右侧的空格.

body {
  height: 75%;
  margin: 0;
  padding: 0;
}
body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  font-size: 21px;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

<div>
  <div><span>Some text regular</span></div>
  <div></div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotext</span></div>
  <div></div>
</div>
<div>
  <div><span>Some text regular</span></div>
  <div></div>
</div>

Answer 1

通过将 设为flex-basis零，您可以将灵活项目缩小到其最小尺寸。因此它会适合文本，但也会强制文本换行：

body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  font-size: 21px;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 0;
      -ms-flex: 0 1 0;
          flex: 0 1 0;
}

<div>
  <div><span>Some text regular</span></div>
  <div></div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotext</span></div>
  <div></div>
</div>