Div内容溢出

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：

.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

我的问题是：我怎么设置div.links的宽度是等于它的宽度是父母没有溢出？

如果可能，我想要纯css解决方案。

我试图设置。链路{宽度：500像素}和它的作品，但我需要使用动态值，以满足所有的浏览器

Answer 1

这里是一个删除下面的CSS的方式来解决这个问题

.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

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