What if 100% meant auto?

<span>
  Hover the text here to reveal it
  [<reveal><div>abc</div></reveal>]
</span>

reveal {
  display: table-cell;
  & > div {
    overflow: hidden; width: 0%;
    transition: width 0.25s;
  }
  &:hover > div {
    width: 100%;
  }
}

https://jsfiddle.net/y8qbeLkw/

How does it work?

An inline table will automatically form around the “reveal” element because its parent is an “inline” element. This inline-table will try to take the minimum possible width. In doing so, it computes the minimum width of the div it contains, but this width depends on a percentage of the table size, so it just assumes this width to be auto.

Therefore, the table-cell ends up having a width corresponding to the minimum width of the contained div, which then gets a relayout where the percentage width is resolved according to the table-cell width (100% of which was its min-content size!).