Alternatives For vh and vw - css

Question

I am trying to design a responsive web page so I am trying to avoid using pixel values. But sometimes, for example when trying to limit the width of a text containing div, I cannot use percentages since the width of the contianer is not known and going to be determined by the content inside. And due to the way CSS works, I cannot give a width value with reference to the container div higher in the html hierarchy.
So I thought of using vw, but since I am using min-width, max-width values on the body, it will not work properly outside those values. What can I use instead to refer to the body width?
Edit:
Since an example was asked for, I provided below an example whereby percentage did not work. Trying to make the span width 10% of the outermost container with no luck. Here is the jsfiddle link also: https://jsfiddle.net/68ha60p6/
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
<div style="width:100%; height:60px;">
<div style="float:right; height:100%;padding-right:1%">
<button style="display:inline-block; height:70%;background-color:green; color:white;border:none; padding:0;">
<span style="display:inline-block; max-width:10%; text-overflow:ellipses;overflow:hidden; max-height:100%;text-align:center;white-space:no-wrap;">John John</span>
</button>
</div>
</div>

Answer 1

I cannot give a width value with reference to the container div higher
in the html hierarchy.
You absolutely can.
Have a look at the example below.
You'll see that the width of the parent container is not explicitly stated (it's determined by the content of the first subcontainer). Regardless, the second subcontainer's width is 50% of its parent's.
div {
margin: 6px;
padding: 6px;
}
.container {
display: inline-block;
border: 1px solid rgb(255,0,0);
}
.subcontainer1 {
border: 1px solid rgb(0,0,255);
}
.subcontainer2 {
width: 50%;
margin: 6px;
border: 1px solid rgb(0,255,0);
}
div p {
line-height: 60px;
}
<div class="container">
<div class="subcontainer1">
<p>I am a long sentence and I will define the width both of this sub-container and of the overall parent container.
</div>
<div class="subcontainer2">
<p>I am half the width of the overall parent container.</p>
</div>
</div>