让左边div填满剩下的space

Question

基于this post我尝试让左边的div填满剩余的space，左右应该总是在一条线上，右边的div应该完全可见。

如何实现？

#left {
  width: 100%;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
#right {
  float: right;
  background-color: #00FF00;
}

<body>
  <div>
    <div id="left">
      left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor
    </div>
    <div id="right">
      this text is dynamic - should be fully visibile
    </div>
  </div>
</body>

编辑：

弹性框答案无效。看起来如果绿色文字变短：

我想要的是绿色 div 现在变小，当文本很短时。

Answer 1

如果您选择 flexbox，这很容易 - 请参阅下面的演示：

将 display: flex 添加到包装器并删除 floats
将white-space:nowrap添加到right

.wrapper {
  display:flex;
}
#left {
  width: 100%;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex:1;
}
#right {
  background-color: #00FF00;
  white-space: nowrap;
}

<div class="wrapper">
  <div id="left">
    left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor
  </div>
  <div id="right">
    this text is dynamic - should be fully visibile
  </div>
</div>

Answer 2

您可以使用 CSS Flexbox.

使用 display: flex; 使父 <div> 成为弹性容器，并同时提供 #left 和 #right flex: 1;

看看下面的片段：

.holder {
  display: flex;
}

#left {
  flex: 1;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#right {
  flex: 1;
  background-color: #00FF00;
}

<html>

<head>
  <title>This is My Page's Title</title>
</head>

<body>
  <div class="holder">
    <div id="left">
      left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor
    </div>
    <div id="right">
      this text is dynamic - should be fully visibile
    </div>
  </div>
</body>

</html>

希望对您有所帮助！

让左边div填满剩下的space

Make left div fill the remaining space

html

css

flexbox

ellipsis