当左边的div与右边的div碰撞时，左边的Div需要溢出

Question

我已经做了3个我想要实现的例子。 我在一个宽度为100％的包装中并排有两个div，左边的div宽度为100％减去righter div的宽度，righter div有一个自动宽度。

当左div文本不足以击中righter div时，左div应该延伸到更直的div。

当左div中的内容太长时，它应该溢出到一个新行，righter div将保持它的宽度。

当内容在righter div中增加时，左边div应调整其宽度并在需要时溢出

有没有办法在没有javascript的情况下执行此操作，最好没有flex？

Answer 1

您可以使用flex：

＆＃13;

＆＃13;

.wrapper {
  background: red;
  display: flex;
  align-items: flex-start;
}

.left {
  background: gray;
  flex: 1;
}

.right {
  background: green;
  width: 150px;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    Lorem ipsum
  </div>
  <div class="right">
    Lorem ipsum
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将display: flex;分配给包装器DIV - 它应该执行您想要的操作

Answer 3

您可以使用Flexbox执行此操作，只需在左侧div上设置flex: 1即可获得自由宽度。另外，为了在文字换行时删除空格，您可以使用word-break: break-all，因此它会在每个字母上打破，并且为了使项目保持自己的高度，您可以添加align-items: flex-start Fiddle

＆＃13;

＆＃13;

.content {
  display: flex;
  align-items: flex-start;
}
.left {
  background: lightblue;
  word-break: break-all;
  flex: 1;
}
.right {
  background: lightgreen;
}

＆＃13;

<div class="content">
  <div class="left">Lorem ipsum dolor sit amet, consectetur.</div>
  <div class="right">loremipsum</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

希望这是你正在寻找的。

.leftdiv {background: green;flex: 1;}

.container {display: flex;align-items: flex-start;}

.rightdiv {background: red;}

<div class="container">
  <div class="leftdiv">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
  </div>
  <div class="rightdiv">
    hello world
  </div>
</div>
</br>
<div class="container">
  <div class="leftdiv">
    Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem      ipsumLorem ipsumLorem ipsumLorem ipsum
  </div>
  <div class="rightdiv">
    Lorem ipsum Lorem ipsum Lorem 
  </div>
</div>