使用包装使最后一个元素占用剩余宽度(并使用IE9支持)

我正在寻找一种方法来将多个项目彼此相邻对齐,让它们在填满线条后进行换行,最后一个项目占用最后一行的剩余宽度.

我之前在类似主题上发现了多个问题,解决方案通常使项目用于float: left将它们对齐在一条线上,而overflow: hidden最后一个元素则使它自动占用剩余空间.这些解决方案在一行中工作正常,但是一旦在最后一个元素之前有足够的项目,它们就会停止工作,它们会被包装成多行.然后,"last"元素仍然在第一行中呈现(如果有足够的空间),使其不再是最后一个元素.

但是,我希望最后一个元素始终保持最后一个元素,将它放在最后一行 - 无论是什么行 - 并自动占用那里的剩余空间.

这是一个非常简单的包装Flexbox,因为你只需要放置flex: 0 auto前面的项目,使它们占用他们需要的任何空间(不需要更多),并flex: 1在最后一个元素上使其占用剩余部分.但是,我需要支持Internet Explorer 9,因此不幸的是,flexbox是不可能的.

这就是情况的样子.当运行片段,您可以使用"切换柔性框"按钮,切换Flexbox的模式,这表明它的方式应该的样子.

* { box-sizing: border-box; }
.container {
  width: 300px;
  background: snow;
  padding: 5px;
  overflow: auto;
}
.element {
  float: left;
  margin: 2px 5px 2px 0;
  background: lavender;
}
.last {
  overflow: hidden;
}
.last > input {
  width: 100%;
}

/* Working solution with flex box */
.flex .container {
  display: flex;
  flex-wrap: wrap;
}
.flex .element {
  flex: 0 auto;
}
.flex .last {
  flex: 1;
}

  
Foo
  
Foo bar
  
Foo bar baz

  




  
Foo
  
Foo bar
  
Foo bar baz
  
Foo
  
Foo bar
  
Foo bar baz

  



Toggle flex box

* { box-sizing: border-box; }
.container {
  width: 300px;
  background: snow;
  padding: 5px;
  overflow: auto;
}
.element {
  float: left;
  margin: 2px 5px 2px 0;
  background: lavender;
}
.last {
  overflow: hidden;
  margin-top: -22px;
  min-width: 1px;
}
.last > input {
  width: 100%;
}
.container .unwrap {
  clear: left;
  margin-top: 22px
}

  

  




  
Foo
  
Foo bar
  
Foo bar baz
  

  




  
Foo
  
Foo bar
  
Foo bar baz boo
  

  

    
  



  
Foo
  
Foo bar
  
Foo bar baz
  
Foo
  
Foo bar
  
Foo bar baz
  

  




  
Foo
  
Foo bar
  
Foo bar baz
  
Foo baaaaaaaaaaaaaaaaaaaaaaar
  

  




  
Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz