Input width auto (autoresized based on content length) - css

Question

I'm trying to make an input autoresize to fit content (not bigger or smaller than needed)
form {
white-space:nowrap;
background: #ddd;
border: 1px solid #ccc;
margin:10px;
padding: 5px;
display:inline-block;
}
input, button {
display:inline-block;
}
input {
max-width: none;
min-width: 0;
width: auto;
-moz-appearance: none;
}
<form>
<button>-</button>
<input type="text" value="0"> minutes
<button>+</button>
</form>
<form>
<button>-</button>
<input type="text" value="500"> minutes
<button>+</button>
</form>
But width auto doesn't do the trick, at least in firefox,
Any idea why?

Answer 1

Well,
As I don't see a css only solution, this a solution involving javascript
(but refering the original question, I would like not to use js if posible..)
$('input').on('change keyup', function() {
var fontsize = parseInt($(this).css('font-size'));
var value = $(this).val();
var length = value.length;
$(this).width(fontsize*length))
});
form {
white-space:nowrap;
background: #ddd;
border: 1px solid #ccc;
margin:10px;
padding: 5px;
display:inline-block;
}
input, button {
display:inline-block;
}
input {
width: 10px;
padding: 0;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<button>-</button>
<input type="text" value="0"> minutes
<button>+</button>
</form>

Answer 2

Have you a live example?
This should be able to be done with CSS and not using JS but would need to be able to check the rest of the code to see that this would fit and work correctly