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%;
}

这是一个演示 https://github.com/wicketstuff/core/pull/476

我的问题是：如何将div.links的宽度设置为等于父级的宽度而没有溢出？

如果可能，我想要纯粹的CSS解决方案。

我尝试设置.link {width：500px}并且它可以工作，但我需要使用动态值来满足所有浏览器

Answer 1

请从.links

中删除以下css

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

Answer 2

以下是解决该问题的一种方法

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Div内容溢出

2 个答案: