Question 210316 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

5

Answers


  1. 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;
   }
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    Use word-break property and set it to break-all to contain it inside the parent container.

    .c {
  background-color: gray;
  margin-left: 20px;
  color: blue;
  height: 20px;
  word-break: break-all;
}

    Refer this

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
  5. 0

    try this css:

    .c span{
  word-break: break-all;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search