Search code examples
flexboxcss-gridword-wrap

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

TL;DR: Here's a CodePen.

I have a UI with an image and a grid of text with long lines which looks like this:

enter image description here

I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:

enter image description here

But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:

enter image description here

How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.

Here's the code:

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;
}
Solution

  • A media query does indeed resolve this:

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

    The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.