set div width to fit the content - css

Question

I tried creating a button. I didn't set the width so it should automatically increase the width when I add a margin to the div or the svg, but it just scales it down and hides the overflow.
.btn {
position: relative;
display: flex;
background: none;
margin: 0.5% 0;
padding: .8%;
border: 1px solid rgba(255, 255, 255, 0);
border-radius: 5px;
cursor: pointer;
color: white;
gap: 20%;
&:hover {
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .4);
}
&:hover.disabled {
background: none;
border: 1px solid rgba(255, 255, 255, 0);
}
&.disabled {
cursor: default;
color: gray;
}
& svg {
background: none;
color: white;
cursor: pointer;
height: 100%;
}
& div {
font-size: 100%;
}
}

Answer 1

Tested the following code on Firefox, and it works as expected. I do not understand what is the problem you are facing, and on what browser.
Also, since, you did not provide any information about the div inside your button, I left it as an empty element. As a result, the div occupies zero width for its content - since it has no content inside of it. Although, padding and margin on the div should work.
Plus, I set box-sizing: border-box on everything using the wildcard selector, since it makes visualizing layout boxes a bit intuitive.
* {
box-sizing: border-box;
}
.btn {
position: relative;
display: flex;
background: transparent;
margin: 0.5% 0;
padding: 0.8%;
/* Changed the border color, so we can see the button size grow */
border: 1px solid black;
border-radius: 5px;
cursor: pointer;
color: white;
gap: 20%;
}
.btn:hover {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn:hover.disabled {
background: none;
border: 1px solid rgba(255, 255, 255, 0);
}
.btn.disabled {
cursor: default;
color: gray;
}
.btn svg {
background: none;
color: white;
cursor: pointer;
height: 100%;
/* Adding margin to check if everything is working fine */
margin: 10px;
}
.btn div {
font-size: 100%;
}
<button class="btn">
<svg width="18" height="18" viewBox="0 0 18 18">
<path d="M15 2V1H3v1H0v4c0 1.6 1.4 3 3 3v1c.4 1.5 3 2.6 5 3v2H5s-1 1.5-1 2h10c0-.4-1-2-1-2h-3v-2c2-.4 4.6-1.5 5-3V9c1.6-.2 3-1.4 3-3V2h-3ZM3 7c-.5 0-1-.5-1-1V4h1v3Zm8.4 2.5L9 8 6.6 9.4l1-2.7L5 5h3l1-2.7L10 5h2.8l-2.3 1.8 1 2.7h-.1ZM16 6c0 .5-.5 1-1 1V4h1v2Z"
></path>
</svg>
<div></div>
</button>