Is it possible to wrap only when space available is below some value?

Question

I have a <div> that contains text. The text have some very long lines, like "To use this page, you have to first register for an account..." etc.

At the right-side of this div, I have an image. When the user is on small screens, I want to wrap contents. When he is not, the image should stay the same size, and the text on the div should wrap lines (but keep the two elements side-by-side).

So far, I was able to make the text wrap only if I add a combination of flex: 0 1 400px, for example. But this combination makes things weird when resizing the screen, because the text stays wrapped even when there's space on the screen (because the div does not grow).

So, what I'm probably looking is that if there's a way to say "only wrap contents if the parent size is lower than ". Is it possible?

Answer 1

You can try setting the flex property to a media query, only for screens that exceeds the parent size so it would something like :

@media only screen and (min-width: *size* px){
     parent{
          flex: 0 1 400px;
     }
}

By using this the text shouldn't be able to wrap anymore in screen lower than the size variable