Edit: Please reopen this question so that people are more likely to read it and answer. The other question isn't a duplicate for the following reasons. I want wrap, not scroll. I want the numbers on the left, not on the right. I don't want them to overlap with the Latin text. Adapting all this isn't trivial.
I have flex-wrap: wrap, but the items don't wrap and the container grows instead. I want the items to wrap, not the container to become higher. Here's an example:
<div style="background-color: #aaa;"><div style="display: flex;"><div style="display: flex; flex-wrap: wrap; flex-direction: column;"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div><div style="width: 300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></div>I see a high container without wrapping:
But I want wrapping instead of unnecessarily growing the container. Here's a sketch:
The height of the container should be dictated by its other children, not by the flexbox child that for some reason refuses to wrap.
The height of the flexbox shouldn't be some arbitrarily hardcoded number. The flexbox should use the space available from its container and then to wrap. The height of the container should be dictated by the other children of that container.
I'm looking for a solution with CSS, not JavaScript.
Various things from various posts such as fit-content and height: auto didn't work.