Is there a reason ListItemSecondaryAction is absolutley positioned?

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I just run into #8205 for the nth time and my fix is always the same, make ListItemSecondaryAction staticly positioned, make the list item container a flexbox and undo the additional padding.

        <ListItem
          style={{paddingRight: 16}}
          ContainerProps={{
            style: {display: 'flex', alignItems: 'center'},
          }}
        >
          ...
          <ListItemSecondaryAction
            style={{position: 'static', transform: 'none'}}
          >
            ...
          </ListItemSecondaryAction>
        </ListItem>

It would be nice if this was not necessary and instead the default behavior.

Current Behavior

The ListItemSecondaryAction is absolutely positioned, causing the problem that it does not grow to take the space needed for its content.

Examples

N/A

Context

I think this is described with enough context above.

[rosskevin]

I tried this long ago and we merged https://github.com/mui-org/material-ui/pull/5911 but reverted due to the ripple issue.

I did try to revisit this, I still have the branch https://github.com/alienfast/material-ui/tree/list-item-flex-revisited - I tried with a ripple bounding element but I did not have success.

I just bumped into this again - am using a ListItem without button but with secondary actions, and want the content to grow but not overflow the actions. I’ll do something custom for now but I definitely think revisiting this is worthwhile.

[Jack-Works]

Use a scary method to patch it

    const buttonRef = useRef<HTMLElement>(null)
    const listRef = useRef<HTMLDivElement>(null)
    useLayoutEffect(() => {
        if (!buttonRef.current || !listRef.current) return
        const width = buttonRef.current.getBoundingClientRect().width
        const child = listRef.current.children[0]
        if (!child) return
        ;(child as HTMLElement).style.paddingRight = `${width + 10}px`
    })