Существует несколько вещей в игре.
- is-extended в основном применяет стиль
flex: 1 0 auto
; Это говорит текущему элементу, когда он содержится на дисплее: flex, чтобы расти, а не сокращаться.
- Ваши элементы html, содержащие ваши входы, устанавливают ограничение по ширине. Даже если он говорит, что хочет расти, он может расти только до размера контейнера его родителя. Один из ваших родителей-родителей ограничивает это.
Итак обходной путь применить стиль flex:1 0 auto
так:
<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"> ....
Использование отладчика Chrome поможет вам увидеть, самый верхний родителем вызывает сужение ширины. Когда вы выделите HTML, он выделит соответствующий отображаемый элемент на странице.