Inline style and computed style aren't equal

[hanford]

Hello - first of all, great work on react-motion .. seriously makes animations on the web a dream :)

I'm having trouble doing a height transition, where the on the react-motion side of things it appears to be working properly.. however the actual computed height doesn't reflect in the inline style..

Here is a video of the this happening here where you can pretty clearly see the DOM style and inline CSS value aren't equal.

Here is the code --

<Motion style={{height: spring(addressBar.open ? document.body.offsetHeight : 50)}}>
  {({ height }) => {
    return (
      <div className={style.addressBar} onClick={toggleAddressBar} style={{ height }}>
        {address.title}
      </div>
    )
  }}
</Motion>

[hanford]

Ahh, turns out that it's because this item is a in a flexbox column layout, where sibling elements are height: 100% ... so it appears that the browser is trying to compensate and fit things on the DOM 🤔