Div內容溢出

我想顯示一個鏈接列表（大約30個鏈接）水平沒有新行，如果內容超過父分區寬度。如果鏈接溢出，將顯示一個滾動條讓用戶看到其餘的鏈接。問題是，父div，包含鏈接的div，如果它的內容超過它的父div，將會超過流量。下面是代碼：的HtmlDiv內容溢出

<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像素}和它的作品，但我需要使用動態值，以滿足所有的瀏覽器

來源

2016-03-23 usef_ksa

試加將'overflow：auto'設置爲'pageContent' 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; 
 
    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>

來源

2016-03-23 09:48:34 LGSon

請從.links

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

來源

2016-03-23 09:17:54

回答

相關問題