Почему правила контейнера не применяются к элементу, созданному с помощью JS?

Question

[atumbochka]

Есть контейнер:

<div class="container">
  <div class="abc">abc</div>
  <div class="game"></div>
</div>

.container {
    width: 100%;
    height: 100%;
    max-width: 960px;

    margin: 0 auto;
}

Див с классом "abc" создал как пример. Он подходит под css-настройки контейнера, и поэтому в "обрезанные" края страницы не попадает. А вот див с классом "game" ведет себя по-другому:

let game = document.querySelector('.game');

window.onload = () => {
    let element = document.createElement('p');
    element.textContent = 'ahahahahahhahah';
    game.appendChild(element);
}

Текст "ahaha" появляется с самого края страницы, хотя game находится внутри страницы. Как это решить?
Заранее спасибо!

Comments

[Вадим]

Скриншот бы, а лучше демку на jsfiddle

[Вадим]

Ну как бы вот:
Что не так?

[atumbochka]

Вадим,

[Вадим]

atumbochka, ага , а стили для .main и .header какие?

Answer 1

[Lord_Dantes]

Ну так если и в abc добавить много текста, он будет идти за границу. Просто используйте word-break

Comments

[atumbochka]

На самом деле вот полный код, и там очень много текста в abc, и тем не менее, все работает:

<div class="container">
        <div class="header">
            <div class="logo"><h2>Языки программирования 2021</h2></div>
            <div class="nav">
                <a href="#" id="a">ссылка1</a>
                <a href="#" id="a">ссылка2</a>
                <a href="#" id="a">ссылка3</a>
            </div>
        </div>
        <div class="main">
            <h2 class="introduction">В данной статье мы расскажем вам о языках программирования на сегодняший момент,
                о лучших из них, и конечно же, о том, какие стоит начинать учить.</h2>
            <h2 class="programmingLanguages">И так, что же такое языки программирования? Язык программирования - это 
                формальный язык, предназначенный для записи компьютерных программ. С помощью него программист может 
                сообщить компьютеру о том, что он хочет сделать.
            </h2>
            <div class="photo1">
                <img src="images/photo1.jpg">
            </div>
            <h2 class="programmingLanguagesExamples">Приведем примеры языков программирования (а также каскадные таблицы 
                стилей и язык гипертекстовой разметки), актуальных на 2021 год: JavaScript, HTML/CSS, Python, Java, C#,
                PHP, TypeScript, C++, C, Go, Kotlin, Swift.
            </h2>
            <div class="slideshow-container">
                <div class="mySlides fade">
                    <img src="images/photo2.jpg" class="slideImage">
                </div>
                  
                <div class="mySlides fade">
                    <img src="images/photo3.jpg" class="slideImage">
                </div>
                  
                <div class="mySlides fade">
                    <img src="images/photo4.jpg" class="slideImage">
                </div>

                <div class="mySlides fade">
                    <img src="images/photo5.jpg" class="slideImage">
                </div>

                <div class="mySlides fade">
                    <img src="images/photo6.jpg" class="slideImage">
                </div>

                <div class="mySlides fade">
                    <img src="images/photo7.jpg" class="slideImage">
                </div>

                <div class="mySlides fade">
                    <img src="images/photo8.jpg" class="slideImage">
                </div>
                  
                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                    <a class="next" onclick="plusSlides(1)">&#10095;</a>
                  </div>
                  <br>
            </div>
            <div class="game">
            </div>
</div>

[Lord_Dantes]

atumbochka, да, удивительно работает. Поэтому лучше добавьте word-break.