フレックスチャイルドを水平にスクロール

Question

私はウェブを威嚇していますが、解決策を得ることはできません。

ここ

がcodepen例である：

http://codepen.io/anon/pen/Wxjjqp

.container { 
    display: flex; 
} 

.horizontally-scrolled-items { 
    display: flex; 
    background: lightblue; 
    overflow-x: scroll; 
} 
.item { 
    width: 1000px; 
    border: 1px solid blue; 
} 

HTML：

<div class="container"> 
    <div class="horizontally-scrolled-items"> 
    <div class="item">item1</div> 
    <div class="item">item2</div> 
    <div class="item">item3</div> 
    </div> 
    <div class="aside"> 
    <button>keep me on screen</button> 
    </div> 
</div> 

アイデアは、フレックスことがhorizntally・スクロール・アイテムのためのものである：1。項目がコンテナの幅よりも大きい場合は、スクロールして、ビューには残します。

Answer 1

min-widthでこれを達成できます。 .itemクラスのmin-widthにflex-grow: 1;を付けてください。次に.horizontally-scrolled-items divをwidth: 100%;に設定します。

CSS

.horizontally-scrolled-items { 
    width: 100%; 
} 

.item { 
    min-width: 400px; 
    flex-grow: 1; 
} 

CodePen

Answer 2

もう一つの方法は、flex-grow: 0; flex-shrink: 0のための短い手で持つアイテムとflex: 0 0 autoを設定することがあるので、フレキシボックスには、アイテムのサイズを変更しようとしません。