how to make the flex item always fill the remaining space of the flex container

Question

I'm new to HTML, CSS, and trying make the fill the remaining space of it's container. The problem is when the content of is too long, it will exceed out of the container, which make the break-word not work (I think so) This is my codes:

.a {
  width: 50%;
  height: 200px;
  background-color: black;
  display: flex;
}
.b {
  height: 100px;
  background-color: yellow;
  display: flex;
}
.c {
  background-color: gray;
  margin-left: 20px;
  color: blue;
  height: 20px; 
  display: flex;
  flex-grow: 1;
  word-wrap: break-word;
}

<div class="a">
  <div class="b">vcvxzc</div>
  <div class="c">
    <span>      ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
    </span>
  </div>  
</div>

When the span is not too long: enter image description here

When it's too long: enter image description here

how can I make it always contain inside the flex container. thank you so much

min-width: 0 to `.c` and `.c span` – Temani Afif Jul 18 '23 at 09:37 — Temani Afif, Jul 18 '23 at 09:37

score 0 · Answer 1 · answered Jul 18 '23 at 07:56

0

if you need to keep height on 20px you can use the style bellow to hide rest of text

.c {
    overflow-y: hidden;
   }

but if height is not important for you and you just want to break the text in that width you can use this style:

.c {
    background-color: gray;
    margin-left: 20px;
    color: blue;
    display: flex;
    flex-grow: 1;
    word-break: break-word;
   }

answered Jul 18 '23 at 07:56

hamed danesh

361
9

1

Yes the height is unimportant so I want to go another way is too display `block`. and after I set the min-width:0px, it worked, do you know why. Thank you for your help – Trung Ha Jul 18 '23 at 08:09
Your welcome. yes, that's another way to do it. – hamed danesh Jul 18 '23 at 08:28

score 0 · Answer 2 · answered Jul 18 '23 at 08:16

I think this is what you need..

All you need to do is, change word-wrap: break-word to word-break: break-word and adjust height appropriately

.a {
  width: 50%;
  height: 200px;
  background-color: black;
  display: flex;
}
.b {
  height: 100px;
  background-color: yellow;
  display: flex;
}
.c {
  background-color: gray;
  margin-left: 20px;
  color: blue;
  height: auto; 
  display: flex;
  flex-grow: 1;
  word-break: break-word;
}

<div class="a">
  <div class="b">vcvxzc</div>
  <div class="c">
    <span>      ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
    </span>
  </div>  
</div>

score -1 · Answer 3 · answered Jul 18 '23 at 08:04

Your question is not clear enough. In the title you asked for how to fill the entire container of a flex parent. You can do so by using Flex-Grow

In the description you asked for how can you prevent overflow in a flex container, you can do so by Flex-wrap.

.a {
  width: 50%;
  height: 200px;
  background-color: black;
  display: flex;
  flex-wrap: wrap;
}
.b {
  height: 100px;
  background-color: yellow;
  display: flex;
}
.c {
  background-color: gray;
  margin-left: 20px;
  color: blue;
  height: 20px; 
  overflow: hidden;
  /* hidden Or scroll */
  display: flex;
  flex-grow: 1;
  word-wrap: break-word;
}

<div class="a">
  <div class="b">vcvxzc</div>
  <div class="c">
    <span>      ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
    </span>
  </div>  
</div>

Sorry for the confuse, I acctually just want the second child to be always in the flex container, auto word break when it content is too long. This is my code now — Trung Ha, Jul 18 '23 at 08:17

score -1 · Answer 4 · answered Jul 18 '23 at 08:21

-1

try this css:

.c span{
  word-break: break-all;
}

answered Jul 18 '23 at 08:21

samran feli

86
5

how to make the flex item always fill the remaining space of the flex container

4 Answers4