Javascript 如何在html中用剩余宽度填充标记？

我试图在一行，一个输入和两个按钮。两个按钮的宽度应该包裹内容，然后输入应该填充其父按钮的宽度。这就是我目前拥有的

        <input id="input-field" style="display:inline-block; width:60%;"></input>
        <button id="sticker-button" style="display:inline-block;">☺</button>
        <button id="send-button" style="display:inline-block;">➤</button>

☺
➤

但是我找不到css来让输入标记填充剩余的宽度。目前我只放了60%，但这显然不起作用。如果这是android，我会让按钮的宽度为

wrap\u content

，输入的宽度为

fill\u parent

有人知道怎么做吗

谢谢

我用这个解决了它

        <div style="display:flex;">
            <input id="input-field" style="width:100%;"></input>
            <button id="sticker-button">☺</button>
            <button id="send-button">➤</button>
        </div>

☺
➤

我不明白你想做什么？