Дочерний div с шириной = 100% расширяет родительский div на максимальную ширину

#javascript #html #css #styling

#javascript #HTML #css #стиль

Вопрос:

Итак, у меня есть родительский div с максимальной шириной 80 вт. Этот родительский div содержит, среди прочего, дочерний div с шириной, установленной на 100%. Дочерний div содержит некоторый текст. Итак, в основном это:

 <div style={{maxWidth: '80vw'}}>
  {/* Some other elements */}
  <div style={{width: '100%'}}>
    Hello world. This is just text.
    This text is just some placeholder.
  </div>
</div>
  

Я бы предположил, что в этом случае произойдет то, что текущая ширина родительского div будет определяться шириной «Некоторых других элементов», и что дочерний div автоматически масштабируется до 100% от этой текущей ширины родительского div.

На самом деле происходит то, что дочерний div масштабируется до 100% от максимальной ширины родительского div, а не его текущей ширины. Как мне заставить дочерний div масштабироваться до 100% от текущей ширины родительского div?

Комментарии:

1. Почему стиль между {{ ... }} ними??

2. Встроенный javascript-стиль 🙂

3. И какой выходной html вы получаете?