Адаптивный дизайн кнопки

Question

Так что я пытаюсь достичь этого сделать DIV с Буфф текстом внутри его заполнить область здесь картина, как она выглядит сейчас http://i.imgur.com/V00gAs8.png, но при изменении размера браузера http://i.imgur.com/XlHvWEN.png

<div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative;"> 
     <div style="background-color: #80DE57; color: white; float: right; text-align: center;width: 10%;height: 8%%;max-height: 100%;">BUFF</div> 

     <p style="margin: 0 1% 0 1%;word-break: break-all "> 
    d 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444         
     </p> 
</div> 

EDIT: Я также хочу высоту, чтобы всегда заполнить этот Див

Answer 1

Ваш Буфф DIV имеет ширину 10%, поэтому, естественно, она будет уменьшаться по мере уменьшения размера экрана. Дайте ему фиксированную ширину, но используйте em units not px, чтобы размер регулировался в соответствии с размером текста, который пользователь использует. Например:

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

Answer 2

Если вы хотите сохранить свою ширину: 10%, чем вы должны дать вашу кнопку минимальную ширину:

min-width:50px; 

Fiddle

Answer 3

Снимите свойство ширины с помощью кнопки , Отрегулируйте расстояние вокруг кнопки с помощью прокладки. Пусть кнопка растет на основе текста внутри нее.

Answer 4

Updated Code

Я сделал это с помощью display: table и display: table-cell

HTML

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

CSS

.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 
}