How to set button dependency on block size?

Question

css

Good afternoon, tell me.
There is such a code, but it looks dumb.
How can I make the button fit the width of its text inside?
And at the same time, so that their sizes depend on the size of the block, if it is smaller, then the font size, like the buttons, also decreased by the same ratio?
With indents, the same trouble turned out.
https://jsfiddle.net/n6ovknnh/

Answer 1

a unit of measure such as viewport width (vw) will help you. Give the root element (body, for example) a font-size, say font-size: 1.4vw , and try scaling. 1vw is 1% of the browser screen width.
here are a couple of live examples of sites with layout based on screen width:
test7.tsymbal.su/index3.php
babycarmebel.ru