Ok, I'm having the following problem: 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?

CodePudding user response：

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

CodePudding user response：

Ok, I was able to make it work with @media. In the end, I did add a @mediawithmin-width: and set theflex-direction: row`, so that it'll simulate the wrap.

I tried to play with flex-wrap but the parent element won't resize when I'm wrapping, so I could not center the other elements, so that's the solution I ended up with.