Way to override flex property to manually set width of span in HTML : <p>I wanted to manually set a width of a span to make a circular highlight on an element. But even when I set the width of the span, it stretches up end to end</p>

<p>Its parent has flex basis property</p>

<pre><code>element.style {
    flex-basis: 14.2857%;
    max-width: 14.2857%;
    overflow: hidden;
    }

</code></pre>

<p>Child property</p>

<pre><code>background: #006edc;
color: white;
height: 40px;
/* width: 10px; */ -&gt; How to set the width
text-align: center;
vertical-align: middle;
border-radius: 50%;
</code></pre>

<p>Thank you for your help</p>
