title: Make input box width smaller when browser is zoomed with css only
body: <p>I want to make my input box width get smaller something more like reduced width, when the browser is zoomed out, and wider when the browser is zoomed in, cause my content is overlapping.</p>
  <p>When i zoom out my content starts to overlap. The first image is 100% percent zoom, browser default.</p>
  <p><a href="https://i.stack.imgur.com/9sKji.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9sKji.png" alt="Normal 100% zoom" /></a></p>
  <p>When I zoom to 110%</p>
  <p><a href="https://i.stack.imgur.com/zkB6r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zkB6r.png" alt="110% zoom, content nearly enters the search bar" /></a></p>
  <p>When i zoom to 125%</p>
  <p><a href="https://i.stack.imgur.com/ya81d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ya81d.png" alt="125% zoom, content enters the search bar" /></a></p>
  <p>How do I make the search bar reduce on zoom out 100% - 110%, and make it increase on zoom in 125% zoom -&gt; 100% zoom</p>
  <p>What I have tried.</p>
  <pre><code>&lt;div class=&quot;example-navigation-bar-two&quot;&gt;
     &lt;input type=&quot;text&quot; class=&quot;example-navigation-bar-two-input&quot;   placeholder=&quot;Search any food item on Example...&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>AND my css</p>
  <pre><code>.example-navigation-bar-two{
    width:68%;    
  }   
  .example-navigation-bar-two-input{
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    float: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    border-left:0px;
    border-right:0px;
    background-repeat: repeat-x;
    white-space: nowrap;
    padding-top:3px;
    padding-left:5px;
    padding-right:5px;
    width:100%;
    height:31.2px;
  }
  </code></pre>
  <p>LOGIN/REGISTER HTML</p>
  <pre><code>&lt;div class=&quot;sharyor-navigation-bar-two&quot;&gt;
    &lt;div class=&quot;sharyor-hundred-percent&quot;&gt;
      
      &lt;div class=&quot;sharyor-right-one&quot;&gt;
        &lt;a href=&quot;&quot;&gt;
          &lt;div&gt;&lt;i class=&quot;fa fa-user-o&quot;&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;span&gt;Login/Register&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      
      &lt;div class=&quot;sharyor-right-two&quot;&gt;
        &lt;a href=&quot;&quot;&gt;
          &lt;div&gt;&lt;i class=&quot;fa fa-heart-o&quot;&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;span&gt;Wish to buy&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      
      &lt;div class=&quot;sharyor-right-three&quot;&gt;
        &lt;a href=&quot;&quot;&gt;
          &lt;div&gt;&lt;i class=&quot;fa fa-shopping-basket&quot;&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;span&gt;Cart&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>LOGIN/REGISTER CSS</p>
  <pre><code>.sharyor-navigation-bar-two{
    z-index:1000;
    right:0;
    margin-right:15px;  
    display:flex;
    position:absolute;
  }
  .sharyor-hundred-percent{
    width:100%;
    position:relative;
    display:flex;
  }
  .sharyor-right-one{
    padding-right:20px; 
  }
  .sharyor-right-two{
    padding-right:20px; 
  }
  .sharyor-right-three{
    padding-right:15px; 
  }
  </code></pre>