3D cylinder loses integrity on small values

Question

A while ago I asked this question, but since then I've learnt that this is not a great approach to this issue, so I rewrote my whole design:

---

I currently have a cylinder that I will be using to generate a 3D visualisation of 'how much liquid is in a jar'. It will be gaining its percentage value from a database.

I currently have the following markup:

$(document).ready(function () {

    var t = (parseInt($('#number').val()));

    $('.containts').css("height", t + "%");
    $('.tank').addClass("makeSmall");
});

 $('#this').on("click",function(){
       var y = (parseInt($('#number').val()));
        $('.containts').css("height", y + "%");
        $('.containts').text(y+"%");
    });

.tank {
    height:40vw;
    width:40vw;
    position:relative;
    z-index:2;
    transition:all 1s;
}
.makeSmall {
    height:40vw;
    width:40vw;
}
.tank:before {
    height:100%;
    width:100%;
    border-radius:100%/30px;
    background:rgba(0, 0, 0, 0.2);
    content:"";
    position:absolute;
}
.tank:after {
    content:"";
    position:absolute;
    border-radius:100%/30px;
    height:30px;
    top:0;
    left:0;
    width:100%;
    background:rgba(0, 0, 0, 0.4);
}
.containts {
    position:absolute;
    background:rgba(255, 0, 0, 0.8);
    bottom:0;
    height:1%;
    width:100%;
    text-align:center;
    border-radius:100%/30px;
    transition:all 1.5s;
        color:white;
}
.containts:after {
    content:"";
    position:absolute;
    background:rgba(0, 0, 0, 0.2);
    top:0;
    left:0;
    height:30px;
    width:100%;
    border-radius:100%/30px;
    border-bottom:1px solid black;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tank">
    
    <div class="containts">50%</div>
</div>
<br/>
<br/>
<br/>
<br/>
Please enter a valuse between 0 and 100:
<input type="number" value="50" id="number" />
<button id="this">GO</button>

However, when I use values roughly smaller than 10 (i.e. 10%), the tank looses its integrity and the value fails to show correctly (i.e. the liquid appears 'outside' its container).

This is particularly easier to see on smaller screens with smaller values.

Would anyone suggest how to alter my current markup in order to stop the 'bottom dropping off the bottom of the container'?

Any further clarification I would be happy to explain further.

---

fiddle for thought

Answer 1

The main problem is that you are using several units (px, %, vw) for the height of your elements which makes calculations complicated. I changed the height of the elipses values to 4vw so they are responsive to viewport width (like the height of the tank) and make calculations easier.

Then you need to calculate the height of .contains. It's minimum height is 4vw (= 10%of 40vw) so it should span 36vw from 4vw to 40vw. As 36 = 40* 0.9 you can write :

var t = (parseInt($('#number').val())),
    h = t*0.9 + 10 ;
    $('.containts').css("height", h + "%");

DEMO

$(document).ready(function() {
  var t = (parseInt($('#number').val())),
    h1 = t * 0.9 + 10;
  $('.containts').css("height", h1 + "%");
  $('.tank').addClass("makeSmall");
});

$('#this').on("click", function() {
  var y = (parseInt($('#number').val())),
    h2 = y * 0.9 + 10;
  $('.containts').css("height", h2 + "%");
  $('.containts').text(y + "%");

});

.tank {
  height: 40vw;
  width: 40vw;
  position: relative;
  z-index: 2;
  transition: all 1s;
}
.makeSmall {
  height: 40vw;
  width: 40vw;
}
.tank:before {
  height: 100%;
  width: 100%;
  border-radius: 100%/30px;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  position: absolute;
}
.tank:after {
  content: "";
  position: absolute;
  border-radius: 100%/30px;
  height: 30px;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.containts {
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  bottom: 0;
  height: 0;
  width: 100%;
  text-align: center;
  border-radius: 100%/30px;
  transition: all 1.5s;
  color: white;
}
.containts:after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  height: 30px;
  width: 100%;
  border-radius: 100%/30px;
  border-bottom: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tank">
  <div class="containts">0%</div>
</div>
<br/>
<br/>
<br/>
<br/>Please enter a valuse between 0 and 100:
<input type="number" value="0" id="number" />
<button id="this">GO</button>