Почему кнопки не принимают полный размер родительского здесь?

Question

Я хочу, чтобы кнопки «Репос» и «Звезды» принимали всю высоту родительского элемента, как значок «github».Код ниже не работает.Я также попытался дать height:100% для flatButtonStyle, но высота всего компонента 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 соответствует его содержимому, поскольку он не имеет фиксированной высоты.

Чтобы установить одинаковую высоту для всех кнопок, вам нужно либо установить фиксированный height для контейнера paper и установить для каждой из кнопок 'min-height значение 100%, либо установитьисправлено height для кнопок со значением, совпадающим со значением кнопки GitHub, поскольку оно обладает наибольшим значением height.