Why does "position: absolute" cause text to overflow?

Question

I have rows with text and an icon side-by-side in an absolutely positioned dialog. The text could potentially be too long, so it has overflow and text-ellipsis CSS properties set.

Setting these properties causes an overflow, even when there aren't any width restrictions:

.container {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 5px solid #5fa5ff;
}
.row {
    display: flex;
    background: #fed;
}
.title {
    white-space: nowrap;
    flex: 1;
    max-width: 1000px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 5px solid #ff5e5e;
}
.icon {
    flex: 0 0 30px;
    border: 5px solid #b047ec;
}

<div class="container">
    <div class="row">
        <div class="title">Lorem ipsum dolor sit amet</div>
        <div class="icon">X</div>
    </div>
</div>

The max-width of the text div is not reached in this example, yet I only see "Lorem dolor sit ..." instead of the full text. Removing the max-width does not change the result. The borders are only for demonstration, and removing them also does not change the result.

Why doesn't the text div expand to the width it needs?