title: How to avoid items in flexbox not come out of div when the div's width next to flexbox is increased?
body: <p>i want the items in flexbox not to come out of flexbox when the div's width next to flexbox is increased.</p>
  
  <p>consider i have a flexbox container which has items such as svg, input field and div with simple text. Next to this flexbox container i have one side panel. This side panel can be resized..meaning when user drags the side panel sideways its width either increases or decreases. In doing so, the flexbox container is shrunk and hence the items in flexbox come out of it...how can i avoid it? how can i make sure that even when the sidepanel is dragged the flexbox items should stay intact? </p>
  
  <pre><code>.wrapper {
      display: flex;
      flex-grow: 1;
  }
  
  .items_container {
      position: relative;
      width: 40px;
      height: 40px;
      top: 16px;
      margin-left: 16px;
      padding-left: 5px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;}}
  
    .items_container.expanded .search_input_field {
        display: flex;
        align-items: center;
     }
  
  &lt;div class="wrapper"&gt;
      &lt;div class="items_container expanded"&gt;
          &lt;div class="search_input_field"&gt;
  
          &lt;Svgsearch/&gt;&lt;input type=text/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;dropdown to be added&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Could someone help me with it? thanks.</p>