встроенный элемент внутри flex

Question

Проблема:

У меня есть гибкий элемент, и внутри него есть некоторый текст.Пока все было хорошо, но затем кто-то добавил

<strong>TEXT</strong>

с нашей CMS, поэтому результат выглядел так:

.flexelement {
  background: red;
  display: flex;
}

<div class="flexelement">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. <strong>Lorem ipsum dolor</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

Фиксированный регистр:

Я исправил это, обернув весь текст дополнительным текстом, ноЯ задавался вопросом и искал способ, которым flexbox игнорирует элемент <strong> и просто размещает его в соответствии с остальным текстом.

Кто-нибудь получил идею для этого?

Answer 1

Природа display:flex состоит в том, чтобы брать все элементы в этом элементе и отображать, как указано flex-flow.

Например, следующий код будет принимать четыре элемента (передТег <b>, внутри тега <b>, внутри тега <i>, после тега <i>) для отображения в flexbox .flex-element

<div class="flex-element">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, ratione 
    <b>dignissimos vel laborum animi recusandae porro reprehenderit,</b>
    <i>odio quod at cumque quo esse rem, reiciendis ex consectetur</i> 
    similique dolor voluptatum.
</div>

Это связано с настройками браузера по умолчанию Погрешность ошибок .

Но в следующем примере он будет рассматривать только один элемент (внутри тега <p>) для отображения в flexbox.

<div class="flex-element">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, ratione 
    <b>dignissimos vel laborum animi recusandae porro reprehenderit,</b>
    <i>odio quod at cumque quo esse rem, reiciendis ex consectetur</i> 
    similique dolor voluptatum.</p>
</div>

Это потому, что весь элемент окружен тегом <p> .

Answer 2

Таково поведение flexbox, ваши дочерние элементы будут автоматически разделены на блоки flex.

Я бы предложил добавить еще один родительский div для абзаца, что-то вроде этого:

<div class="flexelement">
  <div>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
     sed diam nonumy eirmod tempor invidunt ut labore et dolore 
     magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
     justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
     takimata sanctus est Lorem ipsum dolor sit amet. <strong>Lorem 
     ipsum dolor</strong> sit amet, consetetur sadipscing elitr, sed 
     diam nonumy eirmod tempor invidunt ut labore et dolore magna
     aliquyam erat, sed diam voluptua. At vero eos et accusam et 
     justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
     takimata sanctus est Lorem ipsum dolor sit amet.
  </div>    
</div>