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

Проблема:

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

<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> 

Всего 2 ответа


Характер display:flex - принимать каждый элемент в этом элементе и отображать его, когда указан flex-flow .

Например, следующий код будет принимать четыре элемента (до <b> , внутри <b> , внутри <i> , после <i> ), чтобы отображать в элементе .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> .


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

Мое предложение состояло в том, чтобы поместить еще один родительский 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>

Есть идеи?

10000