title: How to make relative margin in flex-item in css?
body: <p>I have <code>div</code> with <code>{display: flex}</code>. it contains 24 elements (hours of day, one div is one hour). Width of every of 24 elements is responsive: <code>{flex-grow:1}</code></p>
  
  <p>Every hour contains some events. Every event have startTime and endTime. For example, I have event which starts at 8.00 and finishes at 8.20: </p>
  
  <p><a href="https://i.stack.imgur.com/dXWzI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dXWzI.png" alt="enter image description here"></a></p>
  
  <p>The simplified code:</p>
  
  <pre><code>&lt;div className="row" style={{display:flex}}&gt;
      &lt;div className="hour" 
          style={{
              flexGrow: 1, 
              display: flex; 
              backgroundColor: white
          }}
      &gt;
          &lt;div className="event" style={{flex-grow: durationInMinutes/60}}&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I use relative width here, so the event is displayed on the right scale. </p>
  
  <p>But, for example, I have event which starts at 8:20 and finishes at 8.40. It means that I need to move <code>&lt;div className="event"&gt;</code> like <code>{marginLeft: 20px * someСoefficient}</code>, where <code>someCoefficient</code> is <code>widthOfHourDiv/60</code> But I don't know the width of <code>&lt;div className="hour"&gt;</code>, because I wrote <code>flex-grow</code> above.</p>
  
  <p>What can I do to calculate marginLeft? </p>