ブルマQ：nav.またはレベル内でinput.is-expandedが機能しない

Question

確かに私はフレックスボックスで多大な経験はありません。私が理解していることは、「拡張されています」ということは、空白が何であっても入力を満たすことができるということです。しかしnav/levelの内部では動作しないようです。劇中でいくつかのものがあります enter link description here

Answer 1

：

はここで働い例です。

1. is-expandedは基本的にスタイルflex: 1 0 autoを適用します。これは、ディスプレイに表示されている現在のアイテムを示します。
2. 入力を含むhtml要素で幅の制限が設定されています。成長したいと言っても、親のコンテナのサイズにしか成長できません。あなたの親の親の1人がこれを制限しています。

だから、この問題を回避するには、そのようなスタイル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"> .... 

クロームデバッガを使用すると、最上位の親は幅制限を引き起こしているかを確認するのに役立ちます使用します。 HTMLを強調表示すると、ページに表示されている対応する要素が強調表示されます。