Запретить расширение дочернего тега p при расширении родительского тега - PullRequest
Новая
       53

Запретить расширение дочернего тега p при расширении родительского тега

0 голосов
/ 25 июня 2019

Я работаю над кодом HTML и CSS и пытаюсь предотвратить расширение дочернего текста div при расширении родительского элемента.Я хочу, чтобы дочерний элемент div оставался своей собственной ширины.

Я пытался добавить фиксированную ширину для дочернего элемента div, но он не отвечает.Я пытался использовать scaleX (), но он не работает.

HTML перед расширением 

<div class="parent col-2">
<div class="child"><p>some long text</p></div>
</div>

HTML после расширения 

<div class="parent col-3">
<div class="child"><p>some long text</p></div>
</div>

<style>
 .parent {
 transition: flex 0.5s ease-in-out;
 }
</style>

Я ожидаюдочерний элемент div остается неизменной ширины даже при расширении родительского элемента.

ОБНОВЛЕНИЕ

код

При нажатии кнопки расширяется родительский элемент.div и текст внутри дочернего div расширяется до (очевидно).Я хочу сохранить ширину текста дочернего элемента div - нет, чтобы расширять - и только родительский элемент div для расширения.

  • Еще один способ, которым я пытаюсь, - это предотвратить влияние родительского перехода на ребенка.

1 Ответ

0 голосов
/ 25 июня 2019

max-width, min-width, width -> вместе полезны в дочернем элементе

display: block или display: inline-block -> если ваш элемент имеет значение по умолчанию display: inline

box-sizing: border-box -> если ваш элемент не подходит так, как вы хотите, вы можете попробовать этот

Не забудьте прочитать документацию об этих реквизитах, надеюсь, это вам помогло 

.child {
  max-width: 640px;
  width: 100%;
  min-width: 300px;
}
<div class="parent col-3">
  <div class="child"><p>some long text</p></div>
</div>
...