Child under flexbox is not taking width specified

Question

I have just started learning CSS and I was working on a page using flexbox. The problem is that,

I have a container which is display: flex. I have a left side image I have a right side long text.

As you can see in the below snippet, the .content is not taking 50% width.

Any help would be appreciated.

Thanks in advance

.container {
  display: flex;
}

img {
  max-width: 100%;
}

.content {
  width: 50%;
}

<div class='container'>
  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
  <div class='content'>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
  </div>
</div>

You need to specify the `flex` property for the childs – Abin Thaha Aug 13 '21 at 07:47 — Abin Thaha, Aug 13 '21 at 07:47

score 1 · Accepted Answer · answered Aug 13 '21 at 07:49

You need to specify the flex property as below.

.container {
  display: flex;
}

img, .content {
  /* max-width: 100%; */
  flex: 1;
  width: 50%;
}

<div class='container'>
  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
  <div class='content'>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
  </div>
</div>

Child under flexbox is not taking width specified

1 Answers1