结果<pre> blocks get wrapped to next line

Question

I am trying to display a layout that should look like this -

My HTML looks like this -

<div>
    <pre>
        001
        002
        003
    </pre>
    <pre>
        Flight A from X to Y
        Flight B from Y to Z
        Flight C from Z to W
    </pre>
    <pre>
        A : 21:00    D : 21:15
        A : 21:15    D : 21:30
        A : 21:30    D : 21:45
    </pre>
</div>

And my CSS looks like

div {
    overflow: scroll;
    white-space: nowrap;
}
div pre {
    overflow: visible;
    float: left;
    width: auto;
}

It all works correctly and I get my desired view.

But when screen resolution is low or when the window is resized to a very small size, the layout changes to this -

I don't want the entire pre blocks to wrap down vertically. I want the horizontal layout to stay as it was earlier and the containing div should activate its horizontal scrolling behaviour.

Things I tried :

As per other related answers on so, I have tried changing CSS property of the pre blocks to display:inline; but that did not change anything.

I tried wrapping the pre blocks into a container pre block of their own (so that they won't wrap down) like :

<div>
    <pre>
        <pre></pre>
        <pre></pre>
        <pre></pre>
    </pre>
</div>

But that didn't help either.

Answer 1

尝试一下

div {
    overflow: scroll;
    white-space: nowrap;
}
div pre {
    overflow: visible;
    float: left;
    width: auto;
}
@media screen and (max-width: 768px) {
  
    div {
    display: flex;
}
  
}

<div>
    <pre>
        001
        002
        003
    </pre>
    <pre>
        Flight A from X to Y
        Flight B from Y to Z
        Flight C from Z to W
    </pre>
    <pre>
        A : 21:00    D : 21:15
        A : 21:15    D : 21:30
        A : 21:30    D : 21:45
    </pre>
</div>