Html Question posted in
Some basic documentation can be found here.

Html – How to wrap div with display: inline-flex?

<div style="width: 250px; background-color: lightcoral">
<div style="display: inline-flex;">Lorem Ipsum</div><div style="display: inline-flex;white-space-collapse: preserve;">, </div><div style="display: inline-flex;">consetetursadipscing elitr, sed diam</div>
</div>

<div style="width: 250px; background-color: lightyellow">
<div style="display: inline-flex;">Lorem Ipsum, consetetursadipscing elitr, sed diam</div>
</div>

How can I style the divs in the red div so that they look like the yellow div?

Tags:

3

Answers


  1. 0 
    <div style="width: 250px; background-color: lightcoral">
<div style="display: inline-flex;">Lorem Ipsum</div><div style="display: contents">, </div><div style="display: contents;">consetetursadipscing elitr, sed diam</div>
</div>

<div style="width: 250px; background-color: lightyellow">
<div style="display: inline-flex;">Lorem Ipsum, consetetursadipscing elitr, sed diam</div>
</div>

    Try this it will work as you have asked

    Login or Signup to reply.
  2. 0 
    <div style="width: 250px; background-color: lightcoral; display: flex; align- 
items: center; overflow: hidden;"><div style="white-space: nowrap;">Lorem 
Ipsum</div><div style="white-space: nowrap;">,</div><div style="white- 
space:nowrap;">consetetursadipscing elitr, sed diam</div>
    Login or Signup to reply.
  3. 0

    inline-flex is a property for layout between flex boxes.

    It may be difficult to understand the way you want to use it, but..
    The different usage requires complexity.

    flex,inline-flex and block, inline-block have a similar context.

    please check this.

    enter image description here

    https://www.samanthaming.com/flexbox30/7-display/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search