Html 三个浮动图元，其中一个缩小到可用空间

我很有信心，这是互联网上一直在讨论的问题之一，但我找不到解决办法

我需要在一个段落的同一行上浮动2个div。这两个div的宽度都是可变的，我需要将段落缩小到可用的空间中，并将其内容包装起来，这样就不会有任何元素脱离行

我已经建立了一个

此处为HTML：

<div class="icon"></div>
<p>This is a really long line of text that will need to wrap</p>
<div class="count"></div>

我知道我可以使用Javascript来实现这一点，但我更愿意找到一个纯CSS解决方案

---

谢谢。

浮动不会收缩或扩展以适应可用空间。浮动项始终使用任何子项所需的空间

就是

---

或者您也可以。

如果这是您要找的，请检查这把小提琴

这里是HTML

   <div class="main">
    <div class="w_200"></div>
    <div class="middle"></div>
    <div class="w_200"></div>
</div>

---

明白了。如果我将段落更改为display:block而不是inline block，并更改元素的顺序，使段落成为标记中的最后一个，那么它将非常有效。

您问题中的代码与您的小提琴中的代码不同。类似于此-宽度百分比宽度和inline block：抱歉-我粘贴了错误的小提琴URL-我已编辑问题以更正链接谢谢链接。不幸的是，没有一个元素具有已知的宽度。虽然我已经把它们包括在小提琴中，但它们的宽度是可变的，正如我在问题中所说的。因此，段落需要缩小以适应剩余的空间。

.flex-column-container {
    flex: 1 auto 1;
}

   <div class="main">
    <div class="w_200"></div>
    <div class="middle"></div>
    <div class="w_200"></div>
</div>

body,div{ 
  margin:0px;
  padding:0px;
}
.main {
  width:100%;
  text-align:center;
  min-width:404px;
  background:black;
  float:left;
}
.w_200 {
  width:200px;
  background:red;
  height:100px;
  float:left;
}
.middle {
  height:100px;
  background:red; 
  float:left;
  width: 49.2%;
  width: -webkit-calc(100% - 404px);
  width: -moz-calc(100% - 404px);
  width: calc(100% - 404px);
  margin:0px 2px;
}