html - div内容溢出

Question

如果内容超过父 div 宽度，我想水平显示链接列表(大约 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 解决方案。

我尝试设置 .link {width:500px} 并且它有效但我需要使用动态值来满足所有浏览器

Answer 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>