Why my third element is not outside of its parent?

Question

I have the following HTML and css

* {
  box-sizing: border-box;
}

.parent {
  background-color: #001f3f;
  display: flex;
  padding: 20px;
}

.child {
  background-color: #0074d9;
  padding: 20px;
  color: white;
  flex-basis: 50% !important;
  border: 3px solid #4CAF50;
}

<div class="parent">
  <div class="child one">child</div>
  <div class="child two">This is some longer content sdsds ds dssdsdsd sds dsdsdsdsdsd sd sd sds sdsdsdsds sdsdsd sd sd sd sd sdsdsdsdsds sdsdsdsd sds dsdsdsds sdsdsdsdsdsdsd</div>
  <div class="child three">child</div>
</div>

I am saying that the flex items should be 50%. I am having three items, so 3 x 50%, that is 150%. My parent has 100% width, why the third item is fitting inside the parent so I have three equal boxes ?

Only if I set flex-wrap: wrap; on my parent

.parent {
    background-color: #001f3f;
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
}

I get the third items goes into new row, which is expected - because there is no space for the third items here.

Why when I don't specify flex-wrap:wrap and I have by default flex-wrap:no-wrap the items are same inside even I specified 50% width of them

And the flex-grow: is 0 by default ? So they should not grow equally

you need to add the flex-shrink propertie set to 0, so the elements won't shrink to fit ;) — G-Cyrillus, Oct 08 '21 at 08:11
`display: flex` makes all child elements in a row. You set all `child`s has the same width, so they have 33.(3)% with. — Sato Takeru, Oct 08 '21 at 08:11
@SatoTakeru display: flex makes automatically the calculations, but in my case i setted 50% width, why they are not taking 50% width ? — peckoski, Oct 08 '21 at 08:14
@peckoski, `parent` is 100% width, and has 3 `child` whose width are same, so they are 33.33% width. if you set 25% with, they will have 25% with. — Sato Takeru, Oct 08 '21 at 08:16
@peckoski, if sum of `child`s' width is bigger than 100%, the width will culculated as 100%, for example, if you set 60%, 30%, 30% as `child`s' width, they will have 50%, 25%, 25% width. — Sato Takeru, Oct 08 '21 at 08:18
What exactly are you trying to achieve? The way I see it, your code works just fine with `flex-wrap: no-wrap` but you choose to break it by using `flex-wrap: wrap`. Why not leave it as no-wrap? — Pepelius, Oct 08 '21 at 08:18
@G-Cyrillus i thought that flex-shrink is when our screen is less then the specifed element width. Then what is the difference between flex-grow and flex-shrink ? — peckoski, Oct 08 '21 at 08:18
@ProDexorite i am asking because i don't know why i have certain output. Read well — peckoski, Oct 08 '21 at 08:20
flex-grow will expand the element to fill entire avalaible space. flex-shrink will or not allow the container to shrink if avalaible space is not enough. flex-grow: i can grow/ flex-shrink : i can shrink ;) 1 says yes : you can, 0 says no, you cannot . — G-Cyrillus, Oct 08 '21 at 08:21

G-Cyrillus · Accepted Answer · 2021-10-08T08:26:12.873

defaut flex-shrink value is set to 1 , to resize children to fit inside the container on the direction axis set.

If flex-wrap is set to wrap, it won't try to fit the element on single line (or column) but will send element to the next line (or column) .

you need to reset flex-shrink value to 0.

example

* {
  box-sizing: border-box;
}

.parent {
  background-color: #001f3f;
  display: flex;
  padding: 20px;
  
  gap: 20px;/* added to follow your padding idea ? */
  overflow: auto;/* or hidden ? */
}

.child {
  background-color: #0074d9;
  padding: 20px;
  color: white;
  flex-basis: 50%;
  border: 3px solid #4CAF50;
  
  /*added*/
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);/* mind that padding idea ? */
}

<div class="parent">
  <div class="child one">child</div>
  <div class="child two">This is some longer content sdsds ds dssdsdsd sds dsdsdsdsdsd sd sd sds sdsdsdsds sdsdsd sd sd sd sd sdsdsdsdsds sdsdsdsd sds dsdsdsds sdsdsdsdsdsdsd</div>
  <div class="child three">child</div>
</div>

thank you for your answer. I accepted it. Btw why are you calculation the with - the padding ? Because i have box-sizing: border box setted on the *. shouldn't be calculated automatically ? — peckoski, Oct 08 '21 at 08:45
the calc is here to avoid the second element to end up on the edge of the scrolling container , it is not a box-sizing matter :) @peckoski — G-Cyrillus, Oct 08 '21 at 08:47

Why my third element is not outside of its parent?

1 Answers1