I have a flex container with two items: an image, and a div containing text and a search box. If the window is sufficiently wide I want the text div to appear to the right of the image, wrapping the text and narrowing the search box as needed. If the window isn't sufficiently wide (like an phone held vertically), I want the text div to appear underneath the image.
I've been able to make the display wrap from side-to-side to one-atop-the-other, but it doesn't try to narrow the text box before it wraps it below the image.
body { background-color: #dbd2c3; font-family: Arial, Helvetica, sans-serif; font-size: 80%; } .hdr-container { display: flex; flex-wrap: wrap; outline: 2px solid #e73; } .logo-div { margin-right: 1em; /* gap for not wrapped */ margin-bottom: 1em; /* gap for wrapped */ outline: 2px solid green; } .logo-img { max-width:100%; /* prevent clipping in narrow viewport */ object-fit: scale-down; /* shrink as needed to maintain max-width */ } .menu-div { align-self: center; outline: 2px solid yellow; } .menu-div p { margin: 0; outline: 2px solid cyan; } .search-div { margin-top: 1em; width: 400px; //min-width: 200px; } .search-text { border-radius: 6px; }<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><div class="hdr-container"><div class="logo-div"><img src="https://picsum.photos/400/175" alt="header" class="logo-img" title="home" border="1"></div><div class="menu-div"><p><strong>SETLISTS:  Lorem ipsum | odor amet | consectetuer adipiscing elit | Senectus aliquet | tempor laoreet</p><p> GALLERIES: Lorem ipsum | odor amet | consectetuer adipiscing elit | Senectus aliquet | tempor laoreet</p><p> STUFF: Lorem ipsum | odor amet | consectetuer adipiscing elit | Senectus aliquet |</strong></p><div class="search-div"><form action="/scripts/search.pl" method="post"><input type="text" class="search-text" placeholder="Search for things . . ." name="terms"><button type="submit">GO</button> <a href="/scripts/power-search.pl" title="Advanced Search">Advanced Search</a></form></div><p><i>(Search for dates, years, songs, words, etc. Use % as a wildcard. Examples: 5/1/81, 12/31/%, 1972, dark star, midnites)</i></p></div></div><hr> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</body>I don't know if my question is answered here or not. I didn't understand the solution enough to try it, and I'm hoping my problem is simpler or at least different.