Flex basis shrinks element but not parent

raquelhortab 0
Viewed 46

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.

enter image description here

enter image description here

enter image description here

Expected behaviour:

enter image description here

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>

flexbox css html
2 Answers

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>

Scario Eva0

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>

LinkinTED0
Related