如何让嵌套在 flexbox 中的 CSS 网格中的文本先换行？

Question

TL;DR: 这是一个 CodePen.

我有一个 UI，其中有一张图片和一个带有长行的文本网格，如下所示：

我正在使用 CSS 具有两个元素的 Flexbox：图像和文本。然后为了布置文本，我使用 CSS 网格。现在，当我在移动设备的窄屏上查看时，它正确地包装了所有内容并堆叠了两个元素：

但在桌面上，稍微窄一些 div，弹性框在网格文本之前换行，如下所示：

在这种情况下，如何让文本换行，同时保留弹性框？我担心我可能需要使用一些媒体查询，但我什至不确定我是否为此使用了正确的 CSS 组件。

代码如下：

index.html:

<div class="media-callout">
    <div class="media-thumb">
        <img height="170" width="120">
    </div>
    <div class="media-callout-grid">
        <div class="media-callout-key">Authors</div>
        <div>Babalola, J &amp; Ogunkola, Babalola</div>

        <div class="media-callout-key">Year</div>
        <div>2013</div>

        <div class="media-callout-key">Title</div>
        <div class="media-callout-value"><a href="https://www.mcser.org/index.php/37-archive/jesr-archive/jesr-2013/615-jesr-vol-3-no-1-january-2013-2">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</a></div>

        <div class="media-callout-key">Journal</div>
        <div><em>Journal of Educational and Social Research</em></div>

        <div class="media-callout-key">Location</div>
        <div>vol. 3, no. 1, pp. 265–274</div>

        <div class="media-callout-key">DOI</div>
        <div><a href="https://doi.org/10.5901/jesr.2013.v3n1p265" target="_blank">10.5901/jesr.2013.v3n1p265</a></div>

    </div>
</div>

style.css:

.media-callout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    column-gap: 10px;

    padding: 1em;
    max-width: max-content;
}
.media-thumb img {
    float: left;
    height: 175px;
    width: auto;
}

.media-callout-grid {
    display: grid;
    font-size: 12pt;
    grid-template-columns: 6em 1fr;
    align-content: center;
    gap: 0 15px;
}
.media-callout-key {
    text-align: right;
    font-weight: bold;
}

.media-callout-value {
    word-break: break-word;
    word-wrap: break-all;
}

Answer 1

媒体查询确实解决了这个问题：

@media screen and (min-width: 600px) {
    .media-callout {
        flex-wrap: nowrap;
    }
}

查询必须在 .media-callout 块之后。我还必须使用 this approach 来防止图像被压扁。

如何让嵌套在 flexbox 中的 CSS 网格中的文本先换行？

How to get text in a CSS grid nested in a flexbox to wrap first?

word-wrap

flexbox

css-grid