Как сжать элемент 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>
9
css css3 flexbox html textwrapping

2 ответов

установка 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>
1

Решение ниже не идеально, но оно тянет элемент flex до текста даже для длинных слов. Это достигается с помощью:

  1. плавающий текстовый контейнер (span)
  2. ломать длинные слова (и переносить их в браузерах, поддерживающих перенос)

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 {
  float: left;
  font-size: 21px;
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
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 flexitemtotextevenlonger and more and more and mroe text</span></div>
  <div></div>
</div>
<div>
  <div><span>Some text regular asdf asdf</span></div>
  <div></div>
</div>
0