Css 响应式按钮设计

所以我想要实现的是，让这个div里面有Buff文本，填充这个区域，这是一张它现在看起来是什么样子的图片 但是当我调整浏览器的大小时

浅黄色

d 444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444

编辑：

---

我还希望高度始终填充此分区

您的Buff分区的宽度为10%，因此它自然会随着屏幕大小的减小而缩小。给它一个固定的宽度，但使用em单位而不是px单位，这样大小将根据用户使用的文本大小进行调整。例如：

width: 5em;   // (choose a suitable value to give a sensible width

---

如果您想保留宽度：10%，则应为按钮提供最小宽度：

min-width:50px;

---

从按钮中删除宽度属性。通过填充调整按钮周围的间距。让按钮根据其中的文本增长。

我使用了

display:table

和

display:table cell

HTML

---

尝试应用宽度而不是百分比的像素。例如：

宽度：50px

。要使其响应迅速，您可以通过@media断点进行调整，并应用特定的宽度。这对宽度有帮助，但高度如何？此布局混乱，只有几个字母，没有整行。右侧的按钮占宽度的80%

min-width:50px;

<div class="outer">
        <p class="leftCnt" >
    d   4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
        </p>
  <div class="rightCnt" >BUFF</div>
</div>

.outer {
  overflow: auto;
  width: 100%; 
  min-height: 41px;
  max-height: 100%; 
  position: relative;
  display: table
}
.leftCnt {
  word-break: break-all; 
  display: table-cell
}
.rightCnt {
  background-color: #80DE57; 
  color: white; 
  text-align: center;
  min-width:  50px;
  width: 10%; /*Add this*/
  display: table-cell; 
  vertical-align:middle
}