Html - overflow hidden is hiding absolute positioned container

YatinGupta
May 29, 2024
177 views
0 votes
2 Answers

I am integrating various third-party web components, the major challenge I am getting is that if a parent or greater parent element is relative positioned and overflow hidden is applied on it, and it has an absolute positioned direct or indirect child, then that absolute positioned element get trimmed due to overflow hidden property.

I have created a similar use case for you to apply and test.

Here is HTML Structure, JavaScript and CSS

body{
  padding: 25px;
}
.relative-container {
  background-color: brown;
  overflow: hidden;
  position: relative;
  color: white;
}
.relative-menu {
  position: relative;
}
.long-text {
  white-space: nowrap;
}
.menu {
  position:absolute;
  top:10px;
  left:-30px;
  background-color: green;
  z-index: 99999;
}
.menu.hide {
  display:none;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div class="relative-container">
        <span class="long-text">
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
        </span>
        <div class="relative-menu">
          <button onclick="toggleMenu()">
            Open Menu
          </button>
          <div class="menu hide">
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
          </div>
        </div>

      </div>
      <script>
        function toggleMenu() {
          const menu = document.querySelector(".menu");
          if (menu) {
            if (menu.classList.contains('show')) {
              menu.classList.remove('show');
              menu.classList.add('hide');
            }
            else {
              menu.classList.remove('hide');
              menu.classList.add('show');
            }
          }

        }
      </script>
  </body>
</html>

After keeping overflow:hidden on .relative-container output is

If we remove overflow:hidden, then menu is looking okay but horizontal scroll comes due to long text as shown:

Expected Output: Menu should be shown outside in bottom left only as shown in 2nd screenshot after removing overflow:hidden but horizontal scroll should not come. And Please NOTE: This is a sample example not actual use case. So you should assume that I cannot change CSS rule on .relative-container and .long-text class.

Answers

I have tried your provided code and adjust the CSS as below:

body{
  padding: 25px;
  overflow-x: hidden;
}
.relative-container {
  background-color: brown;
  overflow: visible;
  position: relative;
  color: white;
}
.relative-menu {
  position: relative;
}
.long-text {
  white-space: nowrap;
}
.menu {
  position:absolute;
  top:20px;
  background-color: green;
  z-index: 99999;
}
.menu.hide {
  display:none;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div class="relative-container">
        <span class="long-text">
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
        </span>
        <div class="relative-menu">
          <button onclick="toggleMenu()">
            Open Menu
          </button>
          <div class="menu hide">
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
          </div>
        </div>

      </div>
      <script>
        function toggleMenu() {
          const menu = document.querySelector(".menu");
          if (menu) {
            if (menu.classList.contains('show')) {
              menu.classList.remove('show');
              menu.classList.add('hide');
            }
            else {
              menu.classList.remove('hide');
              menu.classList.add('show');
            }
          }

        }
      </script>
  </body>
</html>

In the body, I have added the overflow-x: hidden; and the .relative-container class I have replace the overflow:hidden to overflow:visible.
Also in the .menu class I have removed the left:-30px; and the top updated from top:10px; to top:20px;

You can:

Add your popups to body to avoid any bothering with overflow:hidden. A modern approach could be to use <dialog> or Popover API
Wrap your content into a content holder with overflow:hidden as shown in the snippet:

body{
  padding: 25px;
}
.relative-container {
  background-color: brown;
  position: relative;
  color: white;
}
.container-content{
  overflow: hidden;
}
.relative-menu {
  position: relative;
}
.long-text {
  white-space: nowrap;
}
.menu {
  position:absolute;
  top:10px;
  left:-30px;
  background-color: green;
  z-index: 99999;
}
.menu.hide {
  display:none;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div class="relative-container">
        <div class="container-content">
        <span class="long-text">
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
        </span>
        </div>
        <div class="relative-menu">
          <button onclick="toggleMenu()">
            Open Menu
          </button>
          <div class="menu hide">
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
          </div>
        </div>

      </div>
      <script>
        function toggleMenu() {
          const menu = document.querySelector(".menu");
          if (menu) {
            if (menu.classList.contains('show')) {
              menu.classList.remove('show');
              menu.classList.add('hide');
            }
            else {
              menu.classList.remove('hide');
              menu.classList.add('show');
            }
          }

        }
      </script>
  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – overflow hidden is hiding absolute positioned container

Answers