CSS div響應於無響應

Question

我希望兩個容器相鄰。另一個將包含一個接一個線性對齊的元素列表。另一個只包含一個按鈕。

[...] [...] [...]] [按鈕]

我想有響應左側容器，而按鈕應該有一個非變化寬度。在所有情況下，他們必須保持在同一條線上，並且不允許按鈕落入其他元素之下。

但是我無法做到這一點。我發現了很多關於如何做到這一點的例子，那個按鈕就在另一邊，但是讓它們以這種方式顯得更加棘手！

這裏的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> 

一件事是，我想按鈕是在屏幕的完全性右。不是這只是第一個元素的擴展。這意味着剩下的班級將有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>