CSS: какое значение left надо задать дочернему элементу, чтобы он выходил за пределы родителя ровно на свою ширину?

Question

Есть родительский блок с position: relative и дочерний с position: absolute (изначально он скрыт и появляется при наведении на родителя). Нужно, чтобы он выходил за край родителя ровно на свою ширину. Но проблема в том, что контент в нём формируется динамически, и задать какую-то конкретную ширину в пикселях нельзя.

Можно ли решить задачу на чистом css? Или нужно с помощью js высчитывать ширину и добавлять это значение в left?

.wrap {
  border: 1px solid red;
  max-width: 300px;
  margin: 30px auto;
  position: relative;
  height: 100px;
}
.inner {
  border: 1px solid blue;
  position: absolute;
  padding: 10px;
  opacity: 0;
  left: -94px;
  transition: .2s;
}
.wrap:hover .inner {
  opacity: 1;
}

<div class="wrap">
  <div class="inner">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

Answer 1

можно оставить 0, и сделать перенос

left: 0;  
transform: translateX(-100%);

Answer 2

left: auto; /* можно не указывать */
right: 100%;

А вот 2 варианта с кодом из вопроса (1px - это ширина красной границы):

.wrap {
  border: 1px solid red;
  max-width: 300px;
  margin: 30px auto;
  position: relative;
  height: 100px;
}

.inner {
  border: 1px solid blue;
  position: absolute;
  padding: 10px;
  opacity: 0;
  top: -1px;
  right: 100%;
  transition: .2s;
}

.wrap:hover .inner {
  opacity: 1;
}

<div class="wrap">
  <div class="inner">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

.wrap {
  border: 1px solid red;
  max-width: 300px;
  margin: 30px auto;
  position: relative;
  height: 100px;
}

.inner {
  border: 1px solid blue;
  position: absolute;
  padding: 10px;
  opacity: 0;
  right: 100%;
  margin-right: 1px;
  transition: .2s;
}

.wrap:hover .inner {
  opacity: 1;
}

<div class="wrap">
  <div class="inner">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

CSS: какое значение left надо задать дочернему элементу, чтобы он выходил за пределы родителя ровно на свою ширину?

Ответы (2 шт):