Question 231786 in Html Question posted in
Some basic documentation can be found here.

Html – css overflow, need it to show vertically but not horizontally

let hoverBtn1 = document.getElementById("hoverButton1");
let hoverList1 = document.getElementById("hoverList1");

const showList = () => {
    hoverList1.style.display = "flex";
};
const hideList = () => {
    hoverList1.style.display = "none";
};

hoverBtn1.addEventListener("mouseover", showList);
hoverBtn1.addEventListener("mouseout", hideList);

// function columns() {
//   for (let i = 1; i < 5; i++) {
//     let hoverBtn = hoverBtn + i
//     let hoverBtn += document.getElementById("hoverButton" + i);
//     let hoverList = document.getElementById("hoverList" + i);

//     const showList = () => {
//       hoverList.style.display = "flex";
//     }
//     const hideList = () => {
//       "hoverList" + i.style.display = "none";
//     }

//     "hoverBtn" + i.addEventListener('mouseover', showList);
//     "hoverBtn" + i.addEventListener('mouseout', hideList);
//   }
// }
// columns();
.main-container {
    width: 220px;
    overflow-x: hidden;
    height: 300px;
    border: gray solid 2px;
    display: flex;
    padding: 2px 2px 2px 2px;
}
.column {
    width: 100px;
    border: blue solid 1px;
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
}
.hoverButton {
    width: 100px;
    height: 50px;
}
.hoverList {
    border: gray solid 2px;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
<div id="main-container" class="main-container">
    <div id="column1" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton1" class="hoverButton">hover to show </button>
        <div id="hoverList1" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column2" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton2" class="hoverButton">hover to show </button>
        <div id="hoverList2" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column3" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton3" class="hoverButton">hover to show </button>
        <div id="hoverList3" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column4" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton4" class="hoverButton">hover to show </button>
        <div id="hoverList4" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</div>

I have these dropdown menus on the bottom that I need to be able to show but they get cut off by css overflow on the main container. Unfortunately, I’m told I can’t add more white-space to the bottom and so I’m stuck with this container width/height because it messes up page spacing on my real website. Pretend the columns that go horizontally are part of a carousel. Unfortunately they get revealed when the main containers overflow hidden property is deleted. So I guess I have to supposedly keep this overflow hidden for horizontal, but need a solution to get these dropdowns to show vertically when you hover on this button.

I tried playing with z-index/position but it doesn’t get the dropdown menu to show. I tried adding 100px of padding and -100px of margin to bottom of main container (not that 100 is the important amount, just trying to keep the white-spacing the same), but that messed with page layout elsewhere, so I don’t think it’s an option either.

Tags:

4

Answers


  1. 0

    To allow the vertical overflow to be visible, use overflow-x: clip instead of overflow-x: hidden

    MDN References > overflow-y

    If overflow-x is hidden, scroll, or auto and the overflow-y property is visible (default), the value will be implicitly computed as auto.

    auto
    Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view.

    let hoverBtn1 = document.getElementById("hoverButton1");
let hoverList1 = document.getElementById("hoverList1");

const showList = () => {
    hoverList1.style.display = "flex";
};
const hideList = () => {
    hoverList1.style.display = "none";
};

hoverBtn1.addEventListener("mouseover", showList);
hoverBtn1.addEventListener("mouseout", hideList);

// function columns() {
//   for (let i = 1; i < 5; i++) {
//     let hoverBtn = hoverBtn + i
//     let hoverBtn += document.getElementById("hoverButton" + i);
//     let hoverList = document.getElementById("hoverList" + i);

//     const showList = () => {
//       hoverList.style.display = "flex";
//     }
//     const hideList = () => {
//       "hoverList" + i.style.display = "none";
//     }

//     "hoverBtn" + i.addEventListener('mouseover', showList);
//     "hoverBtn" + i.addEventListener('mouseout', hideList);
//   }
// }
// columns();
    .main-container {
    width: 220px;
    overflow-x: clip;
    height: 300px;
    border: gray solid 2px;
    display: flex;
    padding: 2px 2px 2px 2px;
}
.column {
    width: 100px;
    border: blue solid 1px;
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
}
.hoverButton {
    width: 100px;
    height: 50px;
}
.hoverList {
    border: gray solid 2px;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
    <div id="main-container" class="main-container">
    <div id="column1" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton1" class="hoverButton">hover to show </button>
        <div id="hoverList1" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column2" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton2" class="hoverButton">hover to show </button>
        <div id="hoverList2" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column3" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton3" class="hoverButton">hover to show </button>
        <div id="hoverList3" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

    <div id="column4" class="column">
        <h1>Title</h1>
        <br />
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <div>paragraph</div>
        <br />
        <button id="hoverButton4" class="hoverButton">hover to show </button>
        <div id="hoverList4" class="hoverList" style="display: none">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</div>

    Additionally, you can replace the JavaScript with simple CSS

    .hoverButton:hover + .hoverList {
  display: block;
}

    .main-container {
  width: 220px;
  overflow-x: clip;
  height: 300px;
  border: gray solid 2px;
  display: flex;
  padding: 2px 2px 2px 2px;
}

.column {
  width: 100px;
  border: blue solid 1px;
  padding: 2px 2px 2px 2px;
  margin: 2px 2px 2px 2px;
}

.hoverButton {
  width: 100px;
  height: 50px;
}

.hoverButton:hover + .hoverList {
  display: block;
}

.hoverList {
  border: gray solid 2px;
  height: fit-content;
  display: none;
  flex-direction: column;
}
    <div id="main-container" class="main-container">
  <div id="column1" class="column">
    <h1>Title</h1>
    <br />
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <br />
    <button id="hoverButton1" class="hoverButton">hover to show </button>
    <div id="hoverList1" class="hoverList">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>

  <div id="column2" class="column">
    <h1>Title</h1>
    <br />
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <br />
    <button id="hoverButton2" class="hoverButton">hover to show </button>
    <div id="hoverList2" class="hoverList">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>

  <div id="column3" class="column">
    <h1>Title</h1>
    <br />
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <br />
    <button id="hoverButton3" class="hoverButton">hover to show </button>
    <div id="hoverList3" class="hoverList">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>

  <div id="column4" class="column">
    <h1>Title</h1>
    <br />
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <div>paragraph</div>
    <br />
    <button id="hoverButton4" class="hoverButton">hover to show </button>
    <div id="hoverList4" class="hoverList">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Well, haven’t you tried instead of putting a height in your .main-container try a min-height i think this will fix your problem

    Login or Signup to reply.
  3. 0

    Add overflow y scroll

    .main-container {
    overflow-y: scroll;
}
    Login or Signup to reply.
  4. 0

    Add overflow-y: auto to the main-container

    .main-container {
  /* other stuff here */
  overflow-y: auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search