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>
ああを、素晴らしいです。ありがとう@Michael_B – Liam
ただ素早い@Michael_Bですが、上記のスニペットで検索がセクションの中で壊れてしまった場合、セクションをスペースの残りの部分を埋めるように設定し、ボディをオーバーフローさせない方法がありますか? – Liam
左の列は290ピクセルです。あなたは 'width:100vw'に設定された右側の列に' input'を持っています。そのためにオーバーフローが発生します。 'input'の長さを' width:calc(100vw - 290px) 'に変更してください。または、 'input'親をフレックスコンテナにします。次に、 'input'' flex:1'を与えます。これにより、柔軟性が向上します。 –