flex 1 won't fill available space

Question

Why won't flex 1 fill available space?

.container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 8px 20px rgb(0 0 0 / 8%);
    border-radius: 45px;
    padding: 30px;
    margin-bottom: 40px;
}

.sub-container-one {
  font-size: 100px;
}

.sub-sub-container-two {
    display: flex;
    align-items: center;
    /* this apparently should work but it doesn't */
      flex: 1;
}

<div class="container">
  <div class="sub-container-one">
    ftftftftftftf
  </div>
  <div class="sub-container-two">
    <div class="sub-sub-container-two">
      ghghghghghghghghghghghg
    </div>
  </div>
</div>

Fill remaining vertical space with CSS using display:flex

flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/

There are no other children in the div.

Why can't I center sub-sub-container-two ?

I found this question: Flexbox: center horizontally and vertically

It suggests to use a fix height but I can't do this because it needs to support multiple entries. How can I make flex 1 fill available space?

What to do mean by "fill available space"? Which space you want to fill with which container? — verity, Dec 07 '21 at 21:46

Johannes · Answer 1 · 2021-12-07T21:55:29.393

Your flex children are .sub-container-one and .sub-container-two, not .sub-sub-container-two, so all your settings for .sub-sub-container-two should be applied to .sub-container-two. And horizontal centering is done with justify-content, BTW (not with align-items)

.container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 8px 20px rgb(0 0 0 / 8%);
    border-radius: 45px;
    padding: 30px;
    margin-bottom: 40px;
}

.sub-container-one {
  font-size: 100px;
}

.sub-container-two {
    display: flex;
    justify-content: center;
    flex: 1;
}

<div class="container">
  <div class="sub-container-one">
    ftftftftftftf
  </div>
  <div class="sub-container-two">
    <div class="sub-sub-container-two">
      ghghghghghghghghghghghg
    </div>
  </div>
</div>

Also note that your container settings align-items: flex-start; and justify-content: space-between; have no effect if you allow the items to grow and fill the available width.

flex 1 won't fill available space

1 Answers1