css - 如何在可滚动容器中拉伸 flex 子项

Question

我有一个固定宽度和overflow-x: auto. 其中一个孩子也有固定宽度，大于容器的宽度，因此出现水平滚动条。如何拉伸容器中的另一个孩子以包括滚动区域宽度？

<div class="picture">
    <img src="https://picsum.photos/id/715/800/200" width="800" height="200">
    <div class="text">Lorem, ipsum dolor.</div>
</div>

.picture {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 600px;
    overflow-x: auto;

    border: 1px solid black;
}

.text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;

    color: white;
    background-color: tomato;
}

演示

标签： cssflexboxoverflow