CODEWITHSUNDEEP
htmlcssflexbox
usef_ksa
usef_ksa

Reputation: 1659

Div content overflow

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

Upvotes: 2

Views: 120

Answers (2)

Asons
Asons

Reputation: 87303

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>

Upvotes: 2

Dhaval Patel
Dhaval Patel

Reputation: 1106

Please remove below css from .links

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

Upvotes: 2

Related Questions