2017-01-11 18 views
1

私はフレックスボックスの周りに頭を抱えようとしています。フレックスボックスは幅を尊重していません

私は290pxの左の列と右の 'コンテンツ領域'を持つレイアウトを作成しました。

私は、内容領域が流動的で、両方が高さ100%であることを望みます。私はこれを幾分達成しましたが、コンテンツ領域に幅100vwのものを置くと、左の列がサイズダウンします。

.right_col { 
 
    min-height: 792px; 
 
    height: 100%; 
 
    margin-left: 0px; 
 
    background: #F7F7F7; 
 
    display: flex; 
 
    padding: 0 !important; 
 
    width: 100%; 
 
} 
 
.callout-panel { 
 
    background: #fff; 
 
    width: 290px; 
 
    float: none; 
 
    clear: both; 
 
    padding: 0 20px; 
 
} 
 
.input-group { 
 
    position: relative; 
 
    display: table; 
 
    border-collapse: separate; 
 
} 
 
.input-group .form-control, 
 
.input-group-addon, 
 
.input-group-btn { 
 
    display: table-cell; 
 
} 
 
.input-group .form-control { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 100vw; 
 
    margin-bottom: 0; 
 
}
<div class="right_col"> 
 
    <div class="callout-panel">Left column</div> 
 
    <section class="page-inner"> 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control" placeholder="Search"> 
 
     <span class="input-group-btn"> 
 
      <button class=" btn-search" type="button" ></button> 
 
     </span> 
 
    </div> 
 
    </section> 
 
</div>

答えて

2

フレックスコンテナの初期設定がflex-shrink: 1です。

これは、フレックスアイテムがコンテナをオーバーフローさせないために縮小できることを意味します。

代わりのwidth: 290pxこの試してみてください。

flex: 0 0 290px; /* can't grow, can't shrink, fixed at 290px */ 

それとも縮小無効にするために、ルール(.callout-panel)にflex-shrink: 0を追加します。詳細については

は、以下を参照してください。私が見

+1

ああを、素晴らしいです。ありがとう@Michael_B – Liam

+0

ただ素早い@Michael_Bですが、上記のスニペットで検索がセクションの中で壊れてしまった場合、セクションをスペースの残りの部分を埋めるように設定し、ボディをオーバーフローさせない方法がありますか? – Liam

+0

左の列は290ピクセルです。あなたは 'width:100vw'に設定された右側の列に' input'を持っています。そのためにオーバーフローが発生します。 'input'の長さを' width:calc(100vw - 290px) 'に変更してください。または、 'input'親をフレックスコンテナにします。次に、 'input'' flex:1'を与えます。これにより、柔軟性が向上します。 –

関連する問題