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.
The question you linked to is definitely the same question. The answer may work but I agree that it’s difficult to understand and seems a hacky way to do it.
I would recommend styling .hdr-container using grid instead of flex. Grid gives you easy control of the viewport width at which the columns will stack for mobile view (or the width at which they will unstack for desktop view), and easy control of column widths (I have given them proportional widths of 1:2).
I also removed some of your non-breaking spaces and the fixed width on .search-div, to allow things to wrap more easily.
body {
background-color: #dbd2c3;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
}
.hdr-container {
display: grid;
gap: 1em;
outline: 2px solid #e73;
}
@media (min-width: 500px) {
.hdr-container {
grid-template-columns: 1fr 2fr;
}
}
.logo-div {
outline: 2px solid green;
}
.logo-img {
width: 100%;
border: 2px solid black;
box-sizing: border-box;
}
.menu-div {
align-self: center;
outline: 2px solid yellow;
}
.menu-div p {
margin: 0;
outline: 2px solid cyan;
}
.search-div {
margin-top: 1em;
}
.search-text {
border-radius: 6px;
}<div class="hdr-container">
<div class="logo-div">
<img src="https://picsum.photos/400/175" class="logo-img">
</div>
<div class="menu-div">
<p>
<strong>SETLISTS:</strong>
Lorem ipsum |
odor amet |
consectetuer adipiscing elit |
Senectus aliquet |
tempor laoreet
</p>
<p>
<strong>GALLERIES:</strong>
Lorem ipsum |
odor amet |
consectetuer adipiscing elit |
Senectus aliquet |
tempor laoreet
</p>
<p>
<strong>STUFF:</strong>
Lorem ipsum |
odor amet |
consectetuer adipiscing elit |
Senectus aliquet |
</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.