CSS width dependency of icon and div elements inside of a section

Asked Jun 29 '20 at 17:30

Active Jun 29 '20 at 18:09

Viewed 33 times

Can someone explain to me, why when I set a width to the div tag, the width of the i icon is as I defined, but when I don't set a width to the div tag, the width of the icon is unpredictable?

The width of the icon is also changing depending on the length of the text of the paragraph.

(The section is inside a main tag in the body)

.about {
  display: flex;
}

.about div {
  display: flex;
  flex-direction: column;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<section class="about">
  <i class="glyphicon glyphicon-user"></i>
  <div>
    <h5>more text</h5>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure fugit, illum quasi in, amet, iste id voluptatem exercitationem atque numquam aliquam libero saepe laboriosam impedit! Debitis, ipsa. Ducimus, deleniti?
    </p>
  </div>
</section>

edited Jun 29 '20 at 17:45

Umutambyi Gad

4,082
3
18
39

asked Jun 29 '20 at 17:30

guy

I want to assume that using `flex` is what's causing this behavior, which is innately inherited by the `icon` element. – Dylan Smyth Jun 29 '20 at 17:37
You are right, it's because the section styled as ```flex```. Do you know why its matter? any idea how to fix it? – guy Jun 29 '20 at 17:40
flex-shrink:0 to the icon – Temani Afif Jun 29 '20 at 19:23

CSS width dependency of icon and div elements inside of a section

0 Answers0