Flex basis shrinks element but not parent

Question

I am dealing with a flex-box issue. It seems that a flex item with flex basis is shrunk accordingly but the parent maintains its size as if the child still occupied its full size.

These two images are the exact same code except the .earnings-claim-wrapper in the second one does not have the flex property. The last image shows how chrome "represents" that empty space.

Expected behaviour:

I've reduced the code to this:

div{
  padding:10px;
}
.earnings-container {
  display: flex;
  background-color: red;
}

.earnings-info-container {
  background-color: orange;
}

.earnings-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: flex-start;
  background-color: green;
}

.earnings-info .earnings-claim {
  align-self: flex-start;
  background-color: yellow;
}

.earnings-claim-wrapper {
  flex: 0 1 100px;
  position: relative;
  display: flex;
  display: flex;
  flex-direction: column;
  background-color: purple;
}

<div class="earnings-container">
    <div class="earnings-info-container">
        <div class="earnings-info">
            <div class="earnings-icon student-points"></div>
            <div class="earnings-title">earnings-title</div>
            <div class="earnings-claim-wrapper">
                <div class="earnings-claim not-enough-effort">earnings-claim</div>
                <span class="effort-message">Some long text text text text text text long text</span>
            </div>
        </div>
    </div>
    <div class="earnings-info-container">
        <div class="earnings-info">
            <div class="earnings-icon diamonds"></div>
            <div class="earnings-title">earnings-title</div>
        </div>
    </div>
</div>

none of them, the desired result would be the first one but the parent shrinking to fit the content. Instead, the parent keeps the same size as if the child did not have the flex property, with a big empty space (with dotted lines in the last image). Is this clearer? — raquelhortab, Sep 13 '22 at 11:45
Nope, not for me at least... can you add an image of the desired result? — GreyRoofPigeon, Sep 13 '22 at 11:47

score 2 · Answer 1 · answered Sep 13 '22 at 14:28

Instead of using flex: 0 1 100px; on earnings-claim-wrapper class, use width:100px;

div{
  padding:10px;
}
.earnings-container {
  display: flex;
  background-color: red;
}

.earnings-info-container {
  background-color: orange;
}

.earnings-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: flex-start;
  background-color: green;
}

.earnings-info .earnings-claim {
  align-self: flex-start;
  background-color: yellow;
}

.earnings-claim-wrapper {
  width:100px;
  position: relative;
  display: flex;
  display: flex;
  flex-direction: column;
  background-color: purple;
}

<div class="earnings-container">
    <div class="earnings-info-container">
        <div class="earnings-info">
            <div class="earnings-icon student-points"></div>
            <div class="earnings-title">earnings-title</div>
            <div class="earnings-claim-wrapper">
                <div class="earnings-claim not-enough-effort">earnings-claim</div>
                <span class="effort-message">Some long text text text text text text long text</span>
            </div>
        </div>
    </div>
    <div class="earnings-info-container">
        <div class="earnings-info">
            <div class="earnings-icon diamonds"></div>
            <div class="earnings-title">earnings-title</div>
        </div>
    </div>
</div>

Well I guess that would have been a quick solution yes! Maybe I did not try, not sure. Still wonder the logic behind my code not working, thanks though! — raquelhortab, Sep 13 '22 at 14:35

score 0 · Answer 2 · answered Sep 13 '22 at 14:15

I've got to be honest that I can't fully reproduce what happens in your code that makes .earning-info expand. But I did find out it has to do with setting a flex-basis on the .earnings-claim-wrapper elements.

Giving all it's parents a flex-basis as well did the trick here.

Also, I think you can remove some properties, I've commented them out in the snippet.

div{
  padding:10px;
}
.earnings-container {
  display: flex;
  background-color: red;
}

.earnings-info-container {
  flex: 0 1 1%;
  background-color: orange;
  display: flex;
  align-items: flex-start;
}

.earnings-info {
  flex: 0 1 1%;
  display: flex;
  /*flex-wrap: wrap;*/
  /*justify-content: left;*/
  /*align-items: flex-start;*/
  background-color: green;
}

.earnings-info .earnings-claim {
  /*align-self: flex-start;*/
  background-color: yellow;
}

.earnings-claim-wrapper {
  flex: 0 1 100px;
  /*position: relative;
  display: flex;*/
  display: flex;
  flex-direction: column;
  background-color: purple;
}

<div class="earnings-container">
    <div class="earnings-info-container">
        <div class="earnings-info">
            <div class="earnings-icon student-points">x</div>
            <div class="earnings-title">earnings-title</div>
            <div class="earnings-claim-wrapper">
                <div class="earnings-claim not-enough-effort">earnings-claim</div>
                <span class="effort-message">Some long text text text text text text long text</span>
            </div>
        </div>
    </div>
    <div class="earnings-info-container">
        <div class="earnings-info">
            <div class="earnings-icon diamonds">x</div>
            <div class="earnings-title">earnings-title</div>
        </div>
    </div>
</div>

Weird right? What if I don't want the earnings-title to wrap? In my real code I had a table inside and some other things. Adding flex-basis to the other components makes it shrink. (I see now in my last image it was unintentionally wrapped) To be honest I ended up changing my approach to something that worked so I'm good now, but it really bugged me no understanding the logic of it — raquelhortab, Sep 13 '22 at 14:32
Maybe I am missing something there but it seems Scario Eva solution is quite simple and works — raquelhortab, Sep 13 '22 at 14:36
You might want to read this: https://stackoverflow.com/a/34355447/1930721 . Quote "flex-basis applies only to flex items. Flex containers (that aren't also flex items) will ignore flex-basis but can use width and height." — GreyRoofPigeon, Sep 13 '22 at 14:39
According to this though, `flex-basis:100px` and `width:100px` should render equally (given that flex direction is row) right? but they don't — raquelhortab, Sep 14 '22 at 08:00

Flex basis shrinks element but not parent

2 Answers2