我不問問題，所以我不知道我標記的代碼是否正確。

我正在制作一個偽聊天客戶端，它僅用于顯示目的。我一直試圖添加一個假& quot鍵入區域& quot和一個& quot發送按鈕& quot一起，我已經標記為& quot輸入欄& quot。在測試時，我注意到當& quot屏幕& quot/viewport太窄發送按鈕& quot脫離div容器。

.typebar {
    min-width: 0;
    max-width: 620px;
    max-height: 40px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    position: relative; 
    }

.typebar:before {
    content: '';
    border: 5px solid #566573;
    padding: 26px 85% 0 0;
    background: #eeeeee; 
    position: relative;
    float: left;
    cursor: text;
    }

.typebar:after {
    content: 'PESTER';
    font-weight: 600;
    border: 5px solid #566573;
    padding: 5px;
    margin-left: 1%;
    color: #eeeeee;
    background: #2C3E50;
    position: relative;
    float: right;
    cursor: pointer;
    }

<div class="typebar"></div>

問題看起來是這樣的。我添加了一個紅色的邊框，以便看到div容器應該在哪里結束。

這是它在& quot全景& quot。

屏幕太窄時會發生以下情況。(我很肯定地知道，與這個項目互動的人大多是在移動設備上，這就是為什么這對我很重要。)

如果可能的話，我需要一種方法來使它如此& quot之前& quot元素可以& quot最小化& quot(如果有道理的話)更快地防止& quot在& quot元素被引導出div。(又名，保持所需的寬度%)

添加溢出:隱藏；將它保留在div中，但是代價是& quot發送& quot元素變成了，嗯...隱藏！不能在& quot鍵入區域& quot因為沒有內容，只是填充。

試圖給& quot之前& quot元素a的max-height和max-padding，但是當屏幕變得太窄時，它只是不想停留在正確的百分比。

嘗試使用& quot大眾& quot單位(最大寬度在這里似乎不適用)，這只會導致兩個元素都離開div。

我還嘗試將before和after元素放入它們自己的單獨的類中(我最初沒有這樣做的原因是試圖在HTML部分使它更加精簡)，希望它們作為自己的類可能會有不同的行為。沒有。當然，我使用了相同的代碼，除了在& quot在& quot類(內容:“”；到內容:& quot"；).

如果其他方法都失敗了，我可以求助于認輸，簡單地為& quot輸入欄& quot，或者完全刪除這個區域，只讓聊天客戶端自己顯示消息)但是我真的不想這么做。

可以將position: absolute賦予帶有left: 0 for ::before和right: 0 for ::after的偽元素，而不是float屬性。以下是更新后的代碼:-

.typebar {
    min-width: 0;
    max-width: 620px;
    max-height: 40px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    position: relative; 
 }

.typebar:before {
    content: '';
    border: 5px solid #566573;
    padding: 26px 85% 0 0;
    background: #eeeeee; 
    position: absolute;
    left: 0;
    cursor: text;
 }

.typebar:after {
    content: 'PESTER';
    font-weight: 600;
    border: 5px solid #566573;
    padding: 5px;
    margin-left: 1%;
    color: #eeeeee;
    background: #2C3E50;
    position: absolute;
    right: 0;
    cursor: pointer;
 }

如前所述，在這里使用:before和:after是不必要的，而且會適得其反。但是你也沒有充分發揮Flexbox的潛力。(我認為Grid是一個很好的替代方案。)總之，這里有一個快速的flex演示:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;

.typebar {
    min-width: 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    justify-content:space-between;
    }

.typebar .left {
    border: 5px solid #566573;
    background: #eeeeee; 
    cursor: text;
    flex-grow: 1;
    }

.typebar .right {
    font-weight: 600;
    border: 5px solid #566573;
    color: #eeeeee;
    background: #2C3E50;
    cursor: pointer;
    width: min-content;
    }

.left, .right {
  margin: 0;
}

<div class="typebar">
  <p class="left">?</p>
  <p class="right">PESTER</p>
</div>

使用相對長度單位，如百分比、vw、vh等。而不是像px這樣的絕對單位。在示例A和示例B中，寬度以vw為單位——每1vw = 1%的視口寬度。

順便說一下，使用偽元素(即::before和::after)與用戶進行實際交互是一個壞主意，因為就HTML和JavaScript而言，它們并不存在——它們純粹是風格的表現。只有針對實際的元素或樣式，才能間接影響偽元素。在示例B中，我添加了一些額外的CSS、HTML屬性和一個JavaScript & quotkeyup & quot事件處理程序，顯示::before區域如何模擬[contenteditable]元素。不包括作為按鈕進行交互的::after區域(可能會涉及更多)。請記住，示例B是額外的，并不需要作為問題解決方案的一部分。

簡而言之，您最好使用& lt輸入& gt或者一個[contenteditable]和一個& ltbutton & gt或者& lt輸入類型= & quot按鈕& quot& gt然后像a & ltdiv & gt或者& ltsection & gt。

示例A

/**
 * vmin for font-size makes fonts responsive and is not required.
 * If the viewport height is less than it's width, then vh
 * is used and vice versa.
 */
:root {
  font: 5vmin/1.15 "Segoe UI";
}

.text {
  display: flex;
  width: 96vw;
  border: 5px solid red;
  overflow: hidden/* For demo purposes */;
  resize: both/* For demo purposes */;
}

.text::before {
  content: "";
  display: flex;
  align-items: center;
  width: 85vw;
  padding: 5px;
  border: 5px solid #566573;
  background: #eeeeee;
  cursor: text;
}

.text::after {
  content: 'PESTER';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  margin-left: 1vw;
  padding: 2px;
  border: 5px solid #566573;
  font-weight: 600;
  color: #eeeeee;
  background: #2C3E50;
  cursor: pointer;

<div class="text"></div>