One interesting issue I encountered involves displaying each word in a sentence in separate div elements using inline-block with a max-width of 120px. When attempting to increase the font size within the parent div, the inline-block divs begin to overlap due to the larger font size.
Is there a way to dynamically calculate the necessary max-width for the inline-block divs after adjusting the font size?
Below is a snippet of sample code:
jQuery('.btnIncFont').click(function(){
jQuery('.parentDiv').css('font-size',parseInt(jQuery('.parentDiv').css('font-size'))+2);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
<div style="display:inline-block;max-width:120px">This is a test1</div>
<div style="display:inline-block;max-width:120px">This is a test2</div>
<div style="display:inline-block;max-width:120px">This is a test3</div>
<div style="display:inline-block;max-width:120px">This is a test4</div>
</div>If you continue pressing the + button, you will notice that the divs start to overlap. I am seeking a solution to this problem by calculating the appropriate max-width to maintain the correct ratio relative to the original size of 120px after increasing the font size.