What is the best way to allow wider list items to overflow their absolutely positioned container?

Question

What is the best way to allow wider list items to overflow their absolutely positioned container?

My challenge involves a list that is dynamically populated, and I require it to be wider than its absolutely-positioned parent (specifically a custom <select> element implementation).

#wrapper {
    position: relative;
    border: 1px dashed black;
    width: 300px;
    margin: 0 auto;
}

#testContainer {
    display: inline-flex;
    position: absolute;
    right: 0px;
    background-color: fuchsia;
    list-style: none;
    padding: 0;
    border: 5px dashed orange;
}

#testLabel {
    width: 300px;
    background-color: yellow;
}

.testItem {
    width: 200px;
    height: 50px;
    background-color: #aaa;
}

<div id="wrapper">
  <div id="testLabel">label</div>
  <ul id="testContainer">
    <li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
    <li class="testItem">www</li>
    <li class="testItem">cccccccccccccccccc</li>
  </ul>
</div>

The layout works perfectly in most browsers (as seen in screenshot 1) except for Internet Explorer 11 (as shown in screenshot 2). How can I overcome this issue? Please refer to the following Codepen link for more information: https://codepen.io/montrealist/pen/VrrYem

https://i.stack.imgur.com/umbfk.png

https://i.stack.imgur.com/C1JWe.png

html css internet-explorer-11

Answer 1

Answer №1

Here's a way you can achieve this:

Instead of using inline-flex, switch to display:flex in the container with the id #testContainer
Try using width: calc(50vw - 50%)
[Optional for tablet/mobile]: Use left:-50% and width: calc(100vw - 50%) as well
Replace width:200px with flex: 1 in the elements with the class .testIem
To prevent letter overlapping (especially in IE), apply word-wrap: break-word

#wrapper {
  position: relative;
  border: 1px dashed black;
  width: 300px;
  margin: 0 auto;
}

#testContainer {
  display: flex;
  position: absolute;
  right: 0;
  background-color: fuchsia;
  list-style: none;
  padding: 0;
  border: 5px dashed orange;
  width: calc(50vw - 50%)
}

#testLabel {
  width: 300px;
  background-color: yellow;
}

.testItem {
  flex: 1;
  height: 50px;
  background-color: #aaa;
  word-wrap: break-word
}

@media (max-width: 800px) {
  #testContainer {
    right: auto;
    left: -50%;
    width: calc(100vw - 50%)
  }
}

<div id="wrapper">
  <div id="testLabel">label</div>
  <ul id="testContainer">
    <li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
    <li class="testItem">www</li>
    <li class="testItem">cccccccccccccccccc</li>
  </ul>
</div>

Answer 2

Here's a way you can achieve this:

Instead of using inline-flex, switch to display:flex in the container with the id #testContainer
Try using width: calc(50vw - 50%)
[Optional for tablet/mobile]: Use left:-50% and width: calc(100vw - 50%) as well
Replace width:200px with flex: 1 in the elements with the class .testIem
To prevent letter overlapping (especially in IE), apply word-wrap: break-word

#wrapper {
  position: relative;
  border: 1px dashed black;
  width: 300px;
  margin: 0 auto;
}

#testContainer {
  display: flex;
  position: absolute;
  right: 0;
  background-color: fuchsia;
  list-style: none;
  padding: 0;
  border: 5px dashed orange;
  width: calc(50vw - 50%)
}

#testLabel {
  width: 300px;
  background-color: yellow;
}

.testItem {
  flex: 1;
  height: 50px;
  background-color: #aaa;
  word-wrap: break-word
}

@media (max-width: 800px) {
  #testContainer {
    right: auto;
    left: -50%;
    width: calc(100vw - 50%)
  }
}

<div id="wrapper">
  <div id="testLabel">label</div>
  <ul id="testContainer">
    <li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
    <li class="testItem">www</li>
    <li class="testItem">cccccccccccccccccc</li>
  </ul>
</div>

Answer 3

Answer №2

Avoid using flex, let's stick to the traditional methods passed down by our ancestors!

#wrapper {
  border: 1px dashed black;
  margin: 0 auto;
  position: relative;
  width: 300px;
}
#testLabel {
  background: yellow;
}
#testContainer {
  background: fuchsia;
  border: 5px dashed orange;
  font-size: 0;
  list-style: none;
  padding: 0;
  position: absolute;
  right: 0;
  white-space: nowrap;
}
.testItem {
  background: #aaa;
  display: inline-block;
  font-size: 16px;
  height: 50px;
  min-width: 200px;
}

<div id="wrapper">
  <div id="testLabel">label</div>
  <ul id="testContainer">
    <li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
    <li class="testItem">www</li>
    <li class="testItem">cccccccccccccccccc</li>
  </ul>
</div>

Answer 4

Avoid using flex, let's stick to the traditional methods passed down by our ancestors!

#wrapper {
  border: 1px dashed black;
  margin: 0 auto;
  position: relative;
  width: 300px;
}
#testLabel {
  background: yellow;
}
#testContainer {
  background: fuchsia;
  border: 5px dashed orange;
  font-size: 0;
  list-style: none;
  padding: 0;
  position: absolute;
  right: 0;
  white-space: nowrap;
}
.testItem {
  background: #aaa;
  display: inline-block;
  font-size: 16px;
  height: 50px;
  min-width: 200px;
}

<div id="wrapper">
  <div id="testLabel">label</div>
  <ul id="testContainer">
    <li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
    <li class="testItem">www</li>
    <li class="testItem">cccccccccccccccccc</li>
  </ul>
</div>

Answer 5

Answer №3

If I'm not mistaken, the solution would be to include overflow-x: auto; in the css styling for your #testContainer.

By doing this, it will ensure that your List Items are fully visible but require users to scroll horizontally.

Simply update the code as follows:

#testContainer {
  display: flex;
  position: absolute;
  right: 0;
  background-color: aqua;
  list-style: none;
  overflow-x: auto; /* Added to enable horizontal scrolling */
  padding: 0;
  border: 3px solid purple;
  width: calc(50vw - 50%)
}

Answer 6

If I'm not mistaken, the solution would be to include overflow-x: auto; in the css styling for your #testContainer.

By doing this, it will ensure that your List Items are fully visible but require users to scroll horizontally.

Simply update the code as follows:

#testContainer {
  display: flex;
  position: absolute;
  right: 0;
  background-color: aqua;
  list-style: none;
  overflow-x: auto; /* Added to enable horizontal scrolling */
  padding: 0;
  border: 3px solid purple;
  width: calc(50vw - 50%)
}

What is the best way to allow wider list items to overflow their absolutely positioned container?

Answer №1

Answer №2

Answer №3

Similar questions

Utilize a select box to toggle between enabling and disabling options

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

The content is overflowing outside the boundaries of the div, yet there is no

What is the user-agent string for the Safari home screen?

Is there a method to establish varied usage permissions for a single page without any tracking?

What steps can be taken to stop images from overflowing a flex-grow-1 item?

Ionic 4: Facing issues with setting complete background image on ion-card

The content div in CSS is causing the menu div to be displaced

The CSS file cannot be found on the live XAMPP server

Guide on how to forward the response obtained from an Ajax call to a different HTML page

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

Dynamic navigation menu shifting when bolded

Click on a new tab to enable printing options for the page

Conceal the message "Table does not contain any data" if data exists in the table

Easy Div Centering with jQuery Toggle for Internet Explorer 6

How does Firefox still autocomplete even with a different input label?

Breaking or wrapping lines in Visual Studio Code

Automatically add a table row at the bottom displaying the overall calculation

Sending information to a server using JavaScript

Experience the illusion of three-dimensional depth with SVG light and shadow effects