CODEWITHSUNDEEP
htmlcssflexbox
Marcel Schmid
Marcel Schmid

Reputation: 424

inline element inside flex

Problem :

I have a flex element and inside of it there´s some text. So far everything was fine, but then someone added a

<strong>TEXT</strong>

with our CMS, so the result looked like this:

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


Fixed Case :

I fixed this by wrapping the entire text by an additional text, but I was wondering and searching for a way, that the flexbox ignores the <strong>-Element and just arranges it inline with the rest of the text.

Anyone got an idea for this?

Upvotes: 1

Views: 210

Answers (2)

Erwin Sanders
Erwin Sanders

Reputation: 306

That's the behavior of flexbox, your children elements will be divided in flex boxes automatically.

My suggestion would be to put another parent div for the paragraph, something like this:

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

Upvotes: 1

Raja.S.K
Raja.S.K

Reputation: 208

The nature of display:flex is to take each and every elements within that element and display as the flex-flow is specified.

For example, the following code will take four elements (before <b> tag, inside <b> tag, inside <i> tag, after <i> tag) to display within the 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>

This is due to the browser's default error tolerance.

But, in the following example, it will consider only one element (inside <p> tag) to display within the 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>

This is because the whole element is surrounded by a <p> tag.

Upvotes: 2

Related Questions