-1

Admittedly I don't have a ton of experience with flexbox. My understanding is that 'is-expanded' would let the input fill whatever empty space there is. However inside of nav / level it doesn't seem to work.

Here's a working example: enter link description here

Laffer
  • 1

1 Answers1

2

There is a few things in play.

  1. is-expanded basically applies the style flex: 1 0 auto; This tells the current item, when contained in a display:flex to grow and not shrink.
  2. your html elements that contain your inputs is setting a restriction on the width. Even if it says it wants to grow, it can only grow to the size of its parent's container. One of your 's parent-parents is restricting this.

So the workaround apply the style flex:1 0 auto like so: 

<div style="flex: 1 0 auto;" class="nav-left">
  <a class="nav-item">Logo</a>
  <div style="flex: 1 0 auto;" class="nav-item">
    <form style="flex: 1 0 auto;" class="control has-addons"> 
      <input class="input is-expanded" type="text">   ....

Using the Chrome debugger will help you see which top-most-parent is causing the width restriction. When you highlight the HTML, it will highlight the corresponding displayed element on the page.

Angela
  • 191
  • 1
  • 4