使用flexbox

Question

目标：得到2个方框（红色=左边，蓝色=右边），蓝色有max-width值（我们不知道它的确切大小），而红色填充左边的剩余空间

这两个div都填充了文本，如果需要，它将溢出到省略号中。

尝试：我对flex很新，很确定它是解决方案，但却无法使其正常工作。

我不想使用任何javascript来完成这项工作，因为必须采用css方式。

.overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.container{
  width: 100%;
  height:  40px;
  line-height: 40px;
  width: 100%;
  border-bottom: 1px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.left {
  background-color: red;
  flex-flow: 1 1 auto;
  height: 100%
  line-height: 40px;
 }
 .right {
   background-color: blue;
   flex-flow: 1 1 auto;
   max-width: 200px;
   float: right;
   height: 100%
   line-height: 40px;
 }

<div class="container">
  <div class="left overflow">
    this text fills the remaineder of space and goes into ellpsis if it is too long for that space 
  </div>
  <div class="right overflow">
    this text has a max width of 200, is pinned to the right edge of the window, and goes into ellpsis if it overflows
  </div>
</div>

感谢您的帮助。

Answer 1

您的示例中有很多不必要的代码。这应该适合你：

.container {
  display: flex;
  height: 40px;
  border-bottom: 1px solid black;
}
.left {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 40px;
  background-color: red;
}
.right {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 40px;
  background-color: aqua;
}

<div class="container">
  <div class="left">
    this text fills the remaineder of space and goes into ellpsis if it is too long for that space
  </div>
  <div class="right">
    this text has a max width of 200, is pinned to the right edge of the window, and goes into ellpsis if it overflows
  </div>
</div>

jsFiddle

Answer 2

首先，您需要使用“行”作为弹性方向。

此外，您正在不正确地使用“flex-flow”属性。

查找“flex-shrink”和“flex-grow”。它们有助于确定单个项目的弹性大小。

基本上，“收缩”或“增长”值为0意味着该项目不应缩小或增长。上面的任何数字都是相对于其他项目及其内容应缩减或增长的数量。

.overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.container{
  width: 100%;
  height:  40px;
  line-height: 40px;
  width: 100%;
  border-bottom: 1px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.left {
  background-color: red;
  flex-shrink: 1;
  flex-grow: 1;
  height: 100%;
  line-height: 40px;
 }
 .right {
   background-color: blue;
   flex-grow: 1;
   flex-shrink: 0;
   max-width: 200px;
   height: 100%;
   line-height: 40px;
 }

<div class="container">
  <div class="left overflow">
    this text fills the remaineder of space and goes into ellpsis if it is too long for that space 
  </div>
  <div class="right overflow">
    this text has a max width of 200, is pinned to the right edge of the window, and goes into ellpsis if it overflows
  </div>
</div>