Div content overflow

Question

I want to display a list of links (around 30 links) horizontally without having new line if the content exceed the parent div width. A scroll will be shown to let the user see the rest of links if the links overflow. The problem is, the parent div,the div that contains the links, will over flow if it is content exceed it parent div. Here is the code: 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%;
}

Here is a demo http://codepen.io/anon/pen/MymbNy

My question is: how do I set the width of div.links to be equal the width of it is parent without having overflow?

I want pure css solution if possible.

I tried to set .link {width:500px} and it works but I need to use dynamic value to meet all browser

try adding overflow: auto to pageContent div

Rajesh Jangid
– Rajesh Jangid

2016-03-23 09:25:56 +00:00
Commented Mar 23, 2016 at 9:25 — Rajesh Jangid
– Rajesh Jangid, Commented Mar 23, 2016 at 9:25

Asons · Accepted Answer · 2016-03-23 09:48:34Z

Here is one way to fix that

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

Dhaval Patel · Accepted Answer · 2016-03-23 09:17:54Z

2

Please remove below css from .links

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

answered Mar 23, 2016 at 9:17

Dhaval Patel

1,1066 silver badges20 bronze badges

Collectives™ on Stack Overflow

Div content overflow

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related