0

I hope this is not a totally stupid question. I am a little confused with using flex and flex-wrap. I have a bunch of buttons, that should all have the same height and the same width. Every button should take 20% of the available width. And depending how many buttons there are, they should grow until they share the available height. In this example it's 10 buttons but there could also be 15 or more.

This is my code:

<html>
<body style="margin: 0; padding: 0;">
    <div style="min-height: 100vh; display: flex; flex-wrap: wrap; flex-direction: row;">
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
    </div>
</body>
</html>

When you run the snippet, then you can see, that the first row of buttons consumes more height then the second row. The reason seams to be the multline content. But why are the first-row-buttons growing although there is enough space available for the text content.

I hope you can help me.

Thanks in advance.

schlonzo
  • 1,409
  • 13
  • 16
  • @Michael_B Thank you for your comment. No my problem is, that not all of my buttons are getting the same part of the available height. They should share the available height. In this example they should all have 1/2 of the available height. But the buttons in the first row take more height, than the buttons in the second row. – schlonzo Apr 13 '20 at 22:11
  • 1
    Here, using CSS Grid, your rows have equal height: https://jsfiddle.net/zuroxs5g/ – Michael Benjamin Apr 13 '20 at 22:29
  • @Michael_B Oh, that seems to be the hint I needed. Didn't know CSS grid. Thank you! – schlonzo Apr 14 '20 at 05:36

0 Answers0