CSS 如何计算“width: max-content”的translateX值？

Question

How should I calculate the translateX() value when using width: max-content ? I want the text to fully scroll out of the container.

@keyframes scroll_text {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(??)
    }
}

div.container {
    margin: 2rem;
    padding-block: 1em
    background-color: black
    overflow: hidden
}

div.container p {
    line-height: 1em
    width: max-content
    position: relative
    left: 100%
    animation: scroll_text 15s linear infinite
}

Answer 1

This is what ended up working for me (via Typescript). Thank you @Paulie_D.

let scroll_container: HTMLDivElement | undefined
let scroll_text: HTMLParagraphElement | undefined

const width = {
    container: (scroll_container as HTMLDivElement).clientWidth,
    text: (scroll_text as HTMLParagraphElement).offsetWidth,
}

document.documentElement.style.setProperty(
    '--scroll-text-width',
    (width.container + width.text) * -1 + 'px'
)