html - CSS div 在非响应旁边响应

Question

我希望两个容器并排放置。另一个将包含一个接一个地线性对齐的元素列表。另一个只包含一个按钮。

[ [...][...][...] ] [button]

我想让左边的容器响应，而按钮的宽度应该不变。在所有情况下，它们都必须保持在同一行上，并且不允许按钮位于其他元素之下。

但是我没能做到这一点。我找到了很多关于如何以相反方式执行此操作的示例，按钮将在另一侧，但以这种方式设置它们似乎更加棘手!

这是 HTML 的示例:

<div class="left">
    <p>In case we are</p>
    <p>too long</p>
    <p>one will be removed due</p>
    <p>to overflow!</p>
</div>
<div class="right">
    <button>Submit</button>
</div>

还有一件事是我希望 Button 位于屏幕的最右侧。并不是说它只是第一个元素的扩展。这意味着 left 类将有 margin-left: 0px;和类右边距-右边:0px；右:0;.

我希望这不是重复的，但我找不到适用于我的案例的示例。但许多人完全按照这种方式来做。

编辑
这是我现在的 .css 代码，以防有人想看看我在那里搞砸了什么。

.right {
    position: absolute;
    margin-top: 2px;
    display: inline-block;
    margin-right: 3px;
    right: 0;
}
.left {
    margin-top: 2px;
    position: absolute;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid black;
    overflow: hidden;
}

但是，是的，这有一个问题，即使元素在开始时找到了正确的位置，但在某些时候它们开始重叠，因为左侧元素中的内容...

Answer 1

Flexbox 可以做到这一点:

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  align-items: center;
}
.left {
  flex: 1;
  display: flex;
  padding: .25em
}
.left p {
  flex: 1;
  border: 1px solid grey
}
.right {
  flex: 0 0 auto;
  padding: 0 0.25em;
  border: 1px solid grey;
}

<div class="wrapper">
  <div class="left">
    <p>In case we are</p>
    <p>too long</p>
    <p>one will be removed due</p>
    <p>to overflow!</p>
  </div>
  <div class="right">
    <button>Submit</button>
  </div>
</div>