How can I auto-adjust the width of two side by side items (with variable-length content) to minimize total height of their container?

How can I change the CSS, so that the flexbox will only wrap when wrapping would reduce the total height of the blue box? In my example below the wrapping adds to the height. The column widths should adjust automatically, so that wrapping would not be necessary in the example below, but generally still possible (e. g. when the text on the left is very long and needs more column width)…

It should look like this:

div {  border: 1px solid blue;  display: flex;  width: 320px;}ul {  justify-content: flex-end;  display: flex;  flex-wrap: wrap;  li {    border: 1px solid red;    list-style-type: none;    padding: 10px;  }

<div><p>This is a short text. Maybe one or two lines. Or maybe a little more.</p><ul><li>gugu</li><li>gaga</li></ul></div>