How to Limit Unknown Length Wrapped Flex Content to Two Rows

If I have a bunch of buttons with arbitrary length text in it and I want to display them in two rows, how can I achieve this? The text in the buttons may mean that the content overflows two rows.

<div class="container"><button>Arbitrary Length Content</button><button>Arbitrary Length</button><button>Arbitrary</button>  ...</div>

.container {  display: flex;  flex-wrap: wrap;}

One method I have considered is to use overflow: hidden like so:

.container {  max-block-size: 100px;  overflow: hidden;}

However, the downside in this scenario is that screen readers will still be reading the additional content while normal browser users will not be able to see the overflowing buttons.