title: Way to override flex property to manually set width of span in HTML
body: <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>