How to make side-by-side divs in flex container wrap their contents before wrapping themselves

General
1

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:&nbsp
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
        tempor laoreet
      </p>
      <p>
        GALLERIES:&nbsp;
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
        tempor laoreet
      </p>
      <p>
        STUFF:&nbsp;
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
      </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>
          &nbsp;&nbsp;
          <a href="/scripts/power-search.pl" title="Advanced Search">Advanced&nbsp;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 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:&nbsp
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
        tempor laoreet
      </p>
      <p>
        GALLERIES:&nbsp;
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
        tempor laoreet
      </p>
      <p>
        STUFF:&nbsp;
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
      </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>
          &nbsp;&nbsp;
          <a href="/scripts/power-search.pl" title="Advanced Search">Advanced&nbsp;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>

Run code snippet

Expand snippet

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.

2

Understanding the Problem:

You want the text section (menu-div ) to:

  • Appear next to the image (logo-div ) when there’s sufficient space.
  • Wrap underneath the image when the window shrinks.
  • Optionally, the search box (search-text ) can shrink as needed.

The Existing Code:

  • The flex-wrap: wrap on the container (hdr-container ) allows wrapping.
  • Fixed width (width: 400px ) on the search box prevents it from shrinking.

Solution Approach:

  1. Remove Fixed Width from Search Box:
  • Remove width: 400px from .search-div . This allows the search box to shrink along with the text section.
  1. Flexbox Properties for Text Section:
  • Use flex: 1 on .menu-div to make it flexible and grow horizontally as space allows.
  • Consider flex-shrink: 1 on .menu-div (optional) to allow it to shrink proportionally when space becomes limited.

Simplified Code:

CSS

.menu-div {
  align-self: center;
  flex: 1;  /* Grow horizontally */
  flex-shrink: 1; /* Optional: Shrink proportionally */
}

.search-div {
  margin-top: 1em;
  /* No fixed width for search box */
}

Explanation:

  • flex: 1 on .menu-div makes it flexible and allows it to take up available space.
  • flex-shrink: 1 (optional) allows it to shrink proportionately when space is limited, potentially impacting the search box width too.

Testing and Refinement:

  • Test this solution on different screen sizes.
  • If needed, adjust margins or padding on elements within .menu-div to control content placement.

Additional Considerations:

  • You may consider using media queries to adjust styles for different screen sizes more precisely.

By following these steps, you should achieve the desired layout where the text section wraps next to the image and the search box shrinks proportionally as needed.