Have an overflow-x of overflow-y elements

Question

Here is a code snippet:

div.one {
  width: 98%;
  border: 5px solid black;
  overflow-x: visible;
  overflow-y: hidden;
}
div.two {
  word-wrap: break-word;
  width: 100px;
  height: 100px;
  float: left;
  border: 3px dotted orange;
  overflow-x: hidden;
  overflow-y: visible;
}

<div class='one'>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
</div>

How can I make the div.one have a horizontal scroll bar? I want the text to be exactly how it is with that vertical scroll bar. I want all the boxes on the same line and be able to scroll through them.

Thanks in advance.

Possible duplicate of [How to make a DIV not wrap?](https://stackoverflow.com/questions/718891/how-to-make-a-div-not-wrap) — Cold_Class, Jan 28 '18 at 16:47

score 2 · Accepted Answer · answered Jan 28 '18 at 16:46

I got my answer from this post.

I added

white-space: nowrap;
overflow-x: auto;

to div.one

and

display: inline-block; 
white-space: normal;

to div.two, removing float:left;

div.one {
  width: 98%;
  white-space: nowrap;
  border: 5px solid black;
  overflow-x: auto;
  overflow-y: hidden;
}
div.two {
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px dotted orange;
  overflow-x: hidden;
  overflow-y: visible;
}

<div class='one'>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
</div>

Have an overflow-x of overflow-y elements

1 Answers1