Flex or grid container that is as big as its contents with each item having the same size

Question

Is it possible with CSS to have a flex container that is as big as its contents, while each container item has the same size? The width can't be fixed (e.g. 100px) because the length of the item names might change or the amount of items inside.

With grid this is possible if you set the amount columns, but this needs to be dynamic and it could have 2 columns in one place and 3 in the other. So this doesn't seem like an option.

So in this example, item1 and item 2 would have the same width. Where item1 would essentially grow to have the width of the biggest item, item2.

.d-fl

<!-- begin snippet: js hide: false console: true babel: false -->

exbox { display: inline-flex;

}

.d-flexbox > div {
    flex: 1;
}

.item1 {
    background: magenta;
}

.item2 {
    background: cyan;
}

.item3 {
    background: yellow;
}

<div class="d-flexbox">
    <div class="item1">Line</div>
    <div class="item2">Long Line</div>
</div>

<div class="d-flexbox">
    <div class="item1">Line</div>
    <div class="item2">Long Line</div>
    <div class="item3">Very Long Line</div>
</div>