title: inline style react element width
body: <p>I'm trying to create a circular div with a set width. It works fine but once I add more divs than what fits on the screen the circle's width gets overridden. The parent container has <code>overflow: scroll</code> set and the div is scrollable.</p>
  
  <p>Here is my Avatar component code</p>
  
  <pre><code> const Avatar= ({contact, email, circle, width, margin, fontSize, fontWeight}) =&gt; {
    let style = {}
  
    if (width) {
      style.width = `${width}px` || '32px'
      style.height = `${width}px` || '32px'
      style.margin = `${margin}px` || '4px'
    }
  
    if (circle) {
      style.borderRadius = `${width/2}px` || '16px'
    }
  
    let displayName;
  
  
    if (contact &amp;&amp; contact.avatar) {
      return (
        &lt;img style={style}
          src={contact.avatar}
          title={contact.FN || contact.wyreId || email}
          alt={contact.FN || contact.wyreId || email}
        /&gt;
      )
    } ... removed code that sets displayname
  
    // default display
    style.color = '#fff';
    style.background = 'orange';
    style.lineHeight = style.height;
    style.textAlign = 'center';
    style.fontSize = fontSize;
    style.fontWeight = fontWeight;
    return (
      &lt;div style={style}&gt;
          {
            displayName || '?'
          }
        &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WPYMy.png" rel="nofollow noreferrer">Here is an image of the components working as intended.</a>
  <a href="https://i.stack.imgur.com/WlybX.png" rel="nofollow noreferrer">Here is an image of the components not working as intended.</a></p>
  
  <p>when I inspect using dev tools this is the style added to the div for both cases. 
  <code>style=width: 32px; height: 32px; margin: 4px; border-radius: 16px; color: rgb(255, 255, 255); background: orange; line-height: 32px; text-align: center; font-size: 16px; font-weight: bold;</code></p>
  
  <p>Any idea what can be going wrong</p>
  
  <p>Also just in case here is the style set on the parent div.</p>
  
  <pre><code>.horizontalList {
  list-style-type: none;
  margin-top: -20px;
  margin-left: 2%;
  margin-right: 2%;
  padding-bottom: 10px;
  display: inline-flex;
  justify-content: center;
  height: 60px;
  overflow: scroll;}
  </code></pre>