How to make a div vertically scrollable [duplicate

Question

This question already has answers here:

Making a div vertically scrollable using CSS (7 answers)

Closed 5 years ago.

I made a horizontal scroll with a list of picture elements.. But when I made to scroll it vertically I failed to do it.

my code for the horizontal scroller is

<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
    <div class="pic-row">
        <div id="divd" style="width: 1680px;">
            <a href="writeA.html"><img src="images/A.Png" /></a>
            <a href="writeB.html"><img src="images/B.Png" /></a>
            <a href="writeC.html"><img src="images/C.Png" /></a>
            <a href="writeD.html"><img src="images/D.Png" /></a>
            <a href="writeE.html"><img src="images/E.Png" /></a>
            <a href="writeF.html"><img src="images/F.Png" /></a>
            <a href="writeG.html"><img src="images/G.Png" /></a>
            <a href="writeH.html"><img src="images/H.Png" /></a>
            <a href="writeI.html"><img src="images/I.Png" /></a>
            <a href="writeJ.html"><img src="images/J.Png" /></a>
            <a href="writeK.html"><img src="images/K.Png" /></a>
            <a href="writeL.html"><img src="images/L.Png" /></a>
            <a href="writeM.html"><img src="images/M.Png" /></a>
            <a href="writeN.html"><img src="images/N.Png" /></a>
            <a href="writeO.html"><img src="images/O.Png" /></a>
            <a href="writeP.html"><img src="images/P.Png" /></a>
            <a href="writeQ.html"><img src="images/Q.Png" /></a>
            <a href="writeR.html"><img src="images/R.Png" /></a>
            <a href="writeS.html"><img src="images/S.Png" /></a>
            <a href="writeT.html"><img src="images/T.Png" /></a>
            <a href="writeU.html"><img src="images/U.Png" /></a>
            <a href="writeV.html"><img src="images/V.Png" /></a>
            <a href="writeW.html"><img src="images/W.Png" /></a>
            <a href="writeX.html"><img src="images/X.Png" /></a>
            <a href="writeY.html"><img src="images/Y.Png" /></a>
            <a href="writeZ.html"><img src="images/Z.Png" /></a>
        </div>

The css I used is as follows

.pic - container {
  /* The width of mydocument */
  width: 1350 px;
  margin: 0 auto;
  white - space: nowrap;
  overflow - x: inherit;
  overflow - y: hidden; -
  ms - overflow - style: -ms - autohiding - scrollbar;

}
.pic - row {
  /* As wide as it needs to be */
  width: 1527 px;
}

Please Guide me to found a solution to make that horizontal scrolling div into vertical scrolling

Answer 1

you have to set fix height of your main div for horizontal scroll and if your inside content height exceed height of main div then horizontal scroll will come.

.pic-container {
  width: 1350px;
  margin: 0 auto;
  white-space: nowrap;
}

.pic-row {
  /* As wide as it needs to be */
  width: 1350px;
  height: 400px;
  overflow: auto;
}

.pic-row a {
  clear: left;
  display: block;
}

<div class="pic-container">
  <div class="pic-row">
    <a href="writeA.html"><img src="images/A.Png" /></a>
    <a href="writeB.html"><img src="images/B.Png" /></a>
    <a href="writeC.html"><img src="images/C.Png" /></a>
    <a href="writeD.html"><img src="images/D.Png" /></a>
    <a href="writeE.html"><img src="images/E.Png" /></a>
    <a href="writeF.html"><img src="images/F.Png" /></a>
    <a href="writeG.html"><img src="images/G.Png" /></a>
    <a href="writeH.html"><img src="images/H.Png" /></a>
    <a href="writeI.html"><img src="images/I.Png" /></a>
    <a href="writeJ.html"><img src="images/J.Png" /></a>
    <a href="writeK.html"><img src="images/K.Png" /></a>
    <a href="writeL.html"><img src="images/L.Png" /></a>
    <a href="writeM.html"><img src="images/M.Png" /></a>
    <a href="writeN.html"><img src="images/N.Png" /></a>
    <a href="writeO.html"><img src="images/O.Png" /></a>
    <a href="writeP.html"><img src="images/P.Png" /></a>
    <a href="writeQ.html"><img src="images/Q.Png" /></a>
    <a href="writeR.html"><img src="images/R.Png" /></a>
    <a href="writeS.html"><img src="images/S.Png" /></a>
    <a href="writeT.html"><img src="images/T.Png" /></a>
    <a href="writeU.html"><img src="images/U.Png" /></a>
    <a href="writeV.html"><img src="images/V.Png" /></a>
    <a href="writeW.html"><img src="images/W.Png" /></a>
    <a href="writeX.html"><img src="images/X.Png" /></a>
    <a href="writeY.html"><img src="images/Y.Png" /></a>
    <a href="writeZ.html"><img src="images/Z.Png" /></a>
  </div>
</div>

Answer 2

Use the css below

.pic-container {
    width: 50px;
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden;
}

EDIT :- Added a '.' before the class name see the fiddle link HERE

Answer 3

Try this:

index.html:

.pic-container {
  width: 600px;
  height: 600px;
  overflow-y: scroll;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="pic-container">
    <a href="writeA.html"><img src="images/A.png" /></a>
    <a href="writeB.html"><img src="images/B.png" /></a>
    <a href="writeC.html"><img src="images/C.png" /></a>
    <a href="writeD.html"><img src="images/D.png" /></a>
    <a href="writeE.html"><img src="images/E.png" /></a>
  </div>
</body>

</html>