為什么這里的按鈕沒有全尺寸顯示？

Question

我想使回購和星形按鈕像github圖標一樣占據父級的整個高度。 以下代碼無法正常工作。 我還嘗試為flatButtonStyle設置height:100% ，但是整個Paper組件的高度增加了整個頁面。 如何解決呢？

return <>
          <Grid container>
                <Paper>
                    <Button style={flatButtonStyle}><GithubSVG /></Button>
                    <Tooltip title="Visit github.com/nateshmbhat">
                        <a target="_blank" href="https://github.com/nateshmbhat" style={{ padding: '10px' }}>nateshmbhat</a>
                    </Tooltip>
                    <Button style={flatButtonStyle}><i className="fa fa-archive"></i> repos</Button>
                    <Button style={flatButtonStyle}><i className="fa fa-star"></i> Stars</Button>
                </Paper>
          </Grid>
        </>

Answer 1

GitHub按鈕占據了paper的整個高度，因為GitHub SVG賦予了它最大的高度，並且paper不具有固定的高度，因此符合其內容。

為了為所有按鈕設置相同的高度，您要么需要在paper上設置一個固定的height ，然后將每個按鈕的min-height設置為100%要么在按鈕上設置一個固定height ，其值應與GitHub按鈕，因為它具有最大的height 。