allow button to expand fully in responsive grid without truncating text - html

Question

I have a responsive grid and button container that appears on many different pages with different lengths of text on each page.
I don't want the text wrap so I have used white-space: nowrap on the button.
The problem is that the text is getting truncated for longer text such as save and continue.
Is there any way the text can expand to the amount needed irrespective of the width of the parent container?
I could use width: auto on the button but this falls apart at lower resolutions.
.wrapper {
margin: 0 auto;
padding: 0 15px;
}
.grid {
list-style: none;
margin: 0;
padding: 0;
margin-left: -30px;
}
.grid__item {
display: inline-block;
padding-left: 30px;
vertical-align: top;
width: 100%;
box-sizing: border-box;
}
.application-layout__container__right {
float: right;
}
.one-half {
width: 50%;
}
button {
width: 100%;
white-space: nowrap;
border: 1px solid #0065bd;
background-color: #0065bd;
color: #fff;
font-size: 16px;
height: auto;
text-transform: uppercase;
padding: 14px 22px;
line-height: 28px;
font-weight: bold;
cursor: pointer;
display: table;
vertical-align: middle;
text-align: center;
text-decoration: none;
border-radius: 0;
width: 100%;
}
#media (min-width: 380px) {
.application-layout__container {
padding-right: 0;
}
.wrapper {
max-width: 750px;
}
.medium--one-half {
width: 50%;
}
button {
font-size: 19px;
}
}
#media (min-width: 992px) {
.wrapper {
max-width: 970px;
}
.large--one-third {
width: 33.33333%;
}
}
#media (min-width: 1200px) {
.wrapper {
max-width: 1170px;
}
}
<div class="wrapper application-layout__button__wrapper">
<div class="grid">
<div class="grid__item one-half">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third ">
<button>Back
</button>
</div>
</div>
</div>
<div class="grid__item one-half application-layout__container__right">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third">
<button class="remote-submit-button__default button__default button__primary" type="button">Confirm and pay</button>
</div>
</div>
</div>
</div>
</div>

Answer 1

There is a value for what you need but it's not yet supported by all the broswer. It's fit-content that you can use with width/min-width:
.wrapper {
margin: 0 auto;
padding: 0 15px;
}
.grid {
list-style: none;
margin: 0;
padding: 0;
margin-left: -30px;
}
.grid__item {
display: inline-block;
padding-left: 30px;
vertical-align: top;
width: 100%;
box-sizing: border-box;
}
.application-layout__container__right {
float: right;
}
.one-half {
width: 50%;
}
button {
width: 100%;
white-space: nowrap;
border: 1px solid #0065bd;
background-color: #0065bd;
color: #fff;
font-size: 16px;
height: auto;
text-transform: uppercase;
padding: 14px 22px;
line-height: 28px;
font-weight: bold;
cursor: pointer;
display: table;
vertical-align: middle;
text-align: center;
text-decoration: none;
border-radius: 0;
min-width: fit-content;
}
#media (min-width: 380px) {
.application-layout__container {
padding-right: 0;
}
.wrapper {
max-width: 750px;
}
.medium--one-half {
width: 50%;
}
button {
font-size: 19px;
}
}
#media (min-width: 992px) {
.wrapper {
max-width: 970px;
}
.large--one-third {
width: 33.33333%;
}
}
#media (min-width: 1200px) {
.wrapper {
max-width: 1170px;
}
}
<div class="wrapper application-layout__button__wrapper">
<div class="grid">
<div class="grid__item one-half">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third ">
<button>Back
</button>
</div>
</div>
</div>
<div class="grid__item one-half application-layout__container__right">
<div class="grid">
<div class="grid__item one-whole medium--one-half large--one-third">
<button class="remote-submit-button__default button__default button__primary" type="button">Confirm and pay</button>
</div>
</div>
</div>
</div>
</div>