0

How can you display an item per default in its "normal" position (preferably over any following items), like this:

div {
  border: 1px solid black;
}

ul {
  display: flex;
  padding: 0;
  list-style: none;
  width: 250px;
  border: 1px solid black;
}

li {
  display: flex;
  position: relative;
}

.item {
  padding: 0.4em;
  background-color: #f99;
}

.dropdown {
  position: absolute;
  left: 100%;
  z-index: 1;
  padding: 0.4em;
  opacity: 0.7;
  background-color: #2f6f44;
}
<ul>
  <li>
    <div class="item">First</div>
  </li>
  <li>
    <div class="item">Second</div>
    <div class="dropdown">Dropdown</div>
  </li>
  <li>
    <div class="item">Third</div>
  </li>
  <li>
    <div class="item">Fourth</div>
  </li>
</ul>

but if the window becomes too small (represented by the ul here), it sticks to the right:

div {
  border: 1px solid black;
}

ul {
  display: flex;
  position: relative;
  padding: 0;
  list-style: none;
  width: 150px;
  border: 1px solid black;
}

li {
  display: flex;
}

.item {
  padding: 0.4em;
  background-color: #f99;
}

.dropdown {
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0.4em;
  opacity: 0.7;
  background-color: #2f6f44;
}
<ul>
  <li>
    <div class="item">First</div>
  </li>
  <li>
    <div class="item">Second</div>
    <div class="dropdown">Dropdown</div>
  </li>
  <li>
    <div class="item">Third</div>
  </li>
  <li>
    <div class="item">Fourth</div>
  </li>
</ul>

In other words, if (this.left + this.width > totalWidth) stick right else stay left.

I can either get one or the other behaviour (like above), but not so that it switches seamlessly between the two.

The simplest solution is to compute the element width and the window width and position it using JavaScript, but bugs/edge cases easily slip in, so I'm trying to look for a complete CSS solution.

Any number of containers/wrappers are welcome. One solution I tried looking at was wrapping all the "following" elements (Third and Fourth in the examples above) in a separate li with Dropdown. That way a flex element can take up the space between the previous element (Second) and the edge of the container, but then Dropdown can't go any further left than Second (if the container gets too small).

The elements are dynamic in width based upon changing content.

Druckles
  • 3,161
  • 2
  • 41
  • 65
  • Have you looked at the `@media` rule? This appears to already be [answered](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – ChrisSc Nov 16 '22 at 18:09
  • The solution needs to be dynamic (dependent on both window's width **and** the elements' widths), not static. `@media` accepts a single, static width. – Druckles Nov 16 '22 at 18:58
  • If the elements are dynamic in width and/or height based upon changing content, please add that to the question – ChrisSc Nov 16 '22 at 19:13

0 Answers0