почему ширина дочернего элемента изменяется при изменении ширины родительского элемента?

Question

Я пытаюсь создать элемент всплывающей подсказки с минимальной шириной 50 пикселей и максимальной шириной 200 пикселей.Я помещаю элемент всплывающей подсказки внутри другого элемента, чтобы можно было легко контролировать, когда всплывающая подсказка появляется или исчезает, когда на родительском объекте возникает событие наведения.

Проблема, с которой я столкнулся, заключается в том, что ширина элемента всплывающей подсказки выглядит какконтролируется шириной родителя, хотя я указал, что дочерний элемент (всплывающая подсказка) имеет абсолютную позицию.

let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
  b = !b;
  let w = 10;
  if( b ) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000 );

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  position: relative;
  transition: width 2s;
}

#tooltip {
  position: absolute;
  top: calc( 100% + 5px );
  left: 5px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="parent">
  <div id="tooltip">
    My long tooltip text that wraps to multiple lines as needed.
  </div>
</div>

Мне бы хотелось, чтобы всплывающая подсказка (желтый div) сохраняла свой размер в 200px в этом примере, но мы можем видеть это, когда родитель изменяет ширинуширина подсказки также изменяется.Почему?

Есть ли способ решить эту проблему?

Пояснение: В этом примере: https://codepen.io/anon/pen/ePPWER мы видим, что текст всплывающей подсказки выглядит красиво в одной строке.Я не хочу, чтобы div всплывающей подсказки изменял свою ширину, когда родитель изменяет ширину, потому что он заставляет текст всплывающей подсказки переноситься на 2 строки, что нежелательно.

Answer 1

Это потому, что .parent имеет position: relative.Это сохранит всех детей (position: absolute в том числе), как ограничено родителем div.

Не уверен, что это сработает для вас, потому что он вытаскивает tooltip из родителя и делает его собственнымс span переносом текста.Кроме того, вам нужно изменить parent с relative, иначе это будет постоянно влиять на ребенка.

let p = document.getElementById('parent');
let b = true;
setInterval(() => {
  b = !b;
  let w = 10;
  if (b) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000);

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  transition: width 2s;
  position: relative;
}

#root {
  position: relative;
}

#tooltip {
  width: 100%;
}

#tooltip span {
  position: absolute;
  top: calc( 100% + 5px);
  left: 5px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="root">
  <div id="parent"></div>
  <div id="tooltip">
    <span>My long tooltip text that wraps to multiple lines as needed.</span>
  </div>
</div>

Answer 2

Если мы проверим спецификацию, связанную с шириной абсолютно позиционированного элемента , мы можем прочитать это:

'width' и 'right' - это 'auto', а 'left' не является 'auto', тогда ширина уменьшается до нужной.Затем решите для «правильного» * ​​1006 *

Таким образом, в вашем случае ширина вашего элемента будет уменьшена, чтобы соответствовать:

Расчет ширины сжатия для подгонкианалогично вычислению ширины ячейки таблицы с использованием алгоритма автоматического размещения таблиц.Грубо говоря: рассчитайте предпочтительную ширину, отформатировав содержимое без разрывов строк, кроме тех, где происходят явные разрывы строк, а также рассчитайте предпочтительную минимальную ширину, например, попробовав все возможные разрывы строк.CSS 2.1 не определяет точный алгоритм.В-третьих, рассчитайте доступную ширину: это определяется путем определения «ширины» после установки «влево» (в случае 1) или «вправо» (в случае 3) на 0.

Тогда сжатие ширина подгонки: min (max (предпочтительная минимальная ширина, доступная ширина), предпочтительная ширина).

Чтобы сделать это легко и без учета минимальной / максимальной ширины,ширина вашего элемента будет пытаться соответствовать содержимому, не превышая ширину его родительского контейнера (содержащего блок).Добавляя min / max-width, вы просто добавляете больше ограничений.

Одна идея исправить это, чтобы удалить positon:relative из родительского элемента, чтобы он больше не содержал блок элемента position:absolute (* 1024).* это будет исходный содержащий блок , который достаточно широк, чтобы избежать ограничения доступной ширины ).

Затем используйте поле вместо верхнего / левого, чтобы контролировать позицию:

let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
  b = !b;
  let w = 10;
  if( b ) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000 );

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  transition: width 2s;
}

#tooltip {
  position: absolute;
  margin-top: 30px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="parent">
  <div id="tooltip">
    My long tooltip text that wraps to multiple lines as needed.
  </div>
</div>

Answer 3

ID Tooltip используется в Parent.При изменении ширины родительского элемента также предлагается изменить общую ширину всплывающей подсказки.Поскольку вы использовали mix-width и max-width, он будет расширяться, пока не достигнет max-width.Если вы хотите, чтобы это было исправлено, просто используйте width.