ディビジョンのコンテンツのオーバーフロー

Question

親ディビジョンの幅を超えている場合は、新しいラインを持たずにリンクのリスト（約30リンク）を水平に表示したい。リンクがオーバーフローした場合、残りのリンクをユーザーに表示させるためのスクロールが表示されます。 親div、リンクを含むdivは、それが親divを超えるコンテンツの場合はオーバーフローします。ここ はコードです： Htmlの

<div class="container"> 
    <div class="pageContent"> 
     <br /> 
     <div class="links"> 
      <a href='#1'>link1 </a> 
      <a href='#1'>link2 </a> 
      <a href='#1'>link3 </a> 
      <a href='#1'>link4 </a> 
      <a href='#1'>link5 </a> 
      <a href='#1'>link6 </a> 
      <a href='#1'>link7 </a> 
      <a href='#1'>link8 </a> 
      <a href='#1'>link9 </a> 
      <a href='#1'>link1 </a> 
      <a href='#1'>link2 </a> 
      <a href='#1'>link3 </a> 
      <a href='#1'>link4 </a> 
      <a href='#1'>link5 </a> 
      <a href='#1'>link6 </a> 
      <a href='#1'>link7 </a> 
      <a href='#1'>link8 </a> 
      <a href='#1'>link9 </a> 
      <a href='#1'>link1 </a> 
      <a href='#1'>link2 </a> 
      <a href='#1'>link3 </a> 
      <a href='#1'>link4 </a> 
      <a href='#1'>link5 </a> 
      <a href='#1'>link6 </a> 
      <a href='#1'>link7 </a> 
      <a href='#1'>link8 </a> 
      <a href='#1'>link9 </a> 
      <a href='#1'>link1 </a> 
      <a href='#1'>link2 </a> 
      <a href='#1'>link3 </a> 
      <a href='#1'>link4 </a> 
      <a href='#1'>link5 </a> 
      <a href='#1'>link6 </a> 
      <a href='#1'>link7 </a> 
      <a href='#1'>link8 </a> 
      <a href='#1'>link9 </a> 
      <a href='#1'>link1 </a> 
      <a href='#1'>link2 </a> 
      <a href='#1'>link3 </a> 
      <a href='#1'>link4 </a> 
      <a href='#1'>link5 </a> 
      <a href='#1'>link6 </a> 
      <a href='#1'>link7 </a> 
      <a href='#1'>link8 </a> 
      <a href='#1'>link9 </a> 
      <a href='#1'>link1 </a> 
      <a href='#1'>link2 </a> 
      <a href='#1'>link3 </a> 
      <a href='#1'>link4 </a> 
      <a href='#1'>link5 </a> 
      <a href='#1'>link6 </a> 
      <a href='#1'>link7 </a> 
      <a href='#1'>link8 </a> 
      <a href='#1'>link9 </a> 
     </div> 
     <br /> 
    </div> 
    <div class="side"> 
     side here 
    </div> 
</div> 

CSS：私はあることをdiv.linksの幅を設定しない方法：

.container { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
} 
a { 
    padding: 5px; 
} 
.pageContent { 
    order: 2; 
    flex-grow: 4; 
    background: #ecf0f1; 
} 
.side { 
    background: #3498db; 
    flex-grow: 1; 
    order: 1; 
} 
.links { 
    white-space: nowrap; 
    overflow-x: scroll; 
    width: 100%; 
} 

ここでは、私の質問があり、デモ http://codepen.io/anon/pen/MymbNy

ですオーバーフローせずに親の幅に等しいか？

可能であれば、純粋なCSSソリューションが必要です。

私は.link {幅：500pxなど}を設定しようとしましたが、それは動作しますが、私はすべてのブラウザ

Answer 1

を削除してくださいは、ここに1つです

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 

 
} 
 
a { 
 
    padding:5px; 
 
} 
 
.pageContent { 
 

 
    order:2; 
 

 
    flex-grow: 4; 
 
    background:#ecf0f1; 
 

 
} 
 

 
.side { 
 
    background:#3498db; 
 
    flex-grow: 1; 
 
    order: 1; 
 

 

 
} 
 
.links { 
 
    white-space: nowrap; 
 
    width:100%; 
 
    height: 40px; 
 
    position: relative; 
 
} 
 
.links-scroll { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: auto; 
 
}

<div class="container"> 
 

 

 
    <div class="pageContent"> 
 
    <br /> 
 

 
    <div class="links"> 
 
     <div class="links-scroll"> 
 
     <a href='#1'>link1 </a> 
 
     <a href='#1'>link2 </a> 
 
     <a href='#1'>link3 </a> 
 
     <a href='#1'>link4 </a> 
 
     <a href='#1'>link5 </a> 
 
     <a href='#1'>link6 </a> 
 
     <a href='#1'>link7 </a> 
 
     <a href='#1'>link8 </a> 
 
     <a href='#1'>link9 </a> 
 
     <a href='#1'>link1 </a> 
 
     <a href='#1'>link2 </a> 
 
     <a href='#1'>link3 </a> 
 
     <a href='#1'>link4 </a> 
 
     <a href='#1'>link5 </a> 
 
     <a href='#1'>link6 </a> 
 
     <a href='#1'>link7 </a> 
 
     <a href='#1'>link8 </a> 
 
     <a href='#1'>link9 </a> 
 
     <a href='#1'>link1 </a> 
 
     <a href='#1'>link2 </a> 
 
     <a href='#1'>link3 </a> 
 
     <a href='#1'>link4 </a> 
 
     <a href='#1'>link5 </a> 
 
     <a href='#1'>link6 </a> 
 
     <a href='#1'>link7 </a> 
 
     <a href='#1'>link8 </a> 
 
     <a href='#1'>link9 </a> 
 
     <a href='#1'>link1 </a> 
 
     <a href='#1'>link2 </a> 
 
     <a href='#1'>link3 </a> 
 
     <a href='#1'>link4 </a> 
 
     <a href='#1'>link5 </a> 
 
     <a href='#1'>link6 </a> 
 
     <a href='#1'>link7 </a> 
 
     <a href='#1'>link8 </a> 
 
     <a href='#1'>link9 </a> 
 
     <a href='#1'>link1 </a> 
 
     <a href='#1'>link2 </a> 
 
     <a href='#1'>link3 </a> 
 
     <a href='#1'>link4 </a> 
 
     <a href='#1'>link5 </a> 
 
     <a href='#1'>link6 </a> 
 
     <a href='#1'>link7 </a> 
 
     <a href='#1'>link8 </a> 
 
     <a href='#1'>link9 </a> 
 
     <a href='#1'>link1 </a> 
 
     <a href='#1'>link2 </a> 
 
     <a href='#1'>link3 </a> 
 
     <a href='#1'>link4 </a> 
 
     <a href='#1'>link5 </a> 
 
     <a href='#1'>link6 </a> 
 
     <a href='#1'>link7 </a> 
 
     <a href='#1'>link8 </a> 
 
     <a href='#1'>link9 </a> 
 

 
     </div> 
 

 
    </div> 
 
    <br /> 
 

 
    </div> 
 
    <div class="side"> 
 
    side here 
 

 
    </div> 
 

 
</div>

Answer 2

を満たすために動的な値を使用する必要が.links

からCSSを下回る

.links { 
    /*overflow-x: scroll; 
    white-space: nowrap;*/ 
    width: 100%; 
}