CODEWITHSUNDEEP
htmlcssflexbox
DearthFunk
DearthFunk

Reputation: 57

Auto resize left div to remaining space, while right div has a max-width, using flexbox

Goal: get 2 boxes (red = left, blue = right), the blue has a max-width value (we do not know its exact size), while the red fills the remaining space to the left of it.

Both of these div's are filled with text which will overflow into ellipsis if needed.

Tried: I am fairly new to flex, pretty sure it is the solution, but have not been able to get it working.

I do not want to use any javascript to get this work, as there has to be css way of doing it.

.overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.container{
  width: 100%;
  height:  40px;
  line-height: 40px;
  width: 100%;
  border-bottom: 1px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.left {
  background-color: red;
  flex-flow: 1 1 auto;
  height: 100%
  line-height: 40px;
 }
 .right {
   background-color: blue;
   flex-flow: 1 1 auto;
   max-width: 200px;
   float: right;
   height: 100%
   line-height: 40px;
 }
<div class="container">
  <div class="left overflow">
    this text fills the remaineder of space and goes into ellpsis if it is too long for that space 
  </div>
  <div class="right overflow">
    this text has a max width of 200, is pinned to the right edge of the window, and goes into ellpsis if it overflows
  </div>
</div>

Thanks for any help.

Upvotes: 1

Views: 1272

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371331

You have a lot of unnecessary code in your example. This should work for you:

.container {
  display: flex;
  height: 40px;
  border-bottom: 1px solid black;
}
.left {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 40px;
  background-color: red;
}
.right {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 40px;
  background-color: aqua;
}
<div class="container">
  <div class="left">
    this text fills the remaineder of space and goes into ellpsis if it is too long for that space
  </div>
  <div class="right">
    this text has a max width of 200, is pinned to the right edge of the window, and goes into ellpsis if it overflows
  </div>
</div>

jsFiddle

Upvotes: 3

user24950814234
user24950814234

Reputation: 2037

First, you need to use "row" as your flex direction.

Also you are using the "flex-flow" property improperly.

Look up "flex-shrink" and "flex-grow". They help determine how big an individual item should get in flex.

Basically a "shrink" or "grow" value of 0 means the item shouldn't shrink or grow. Any number above that is how much it should shrink or grow relative to the other items, and its content.

.overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.container{
  width: 100%;
  height:  40px;
  line-height: 40px;
  width: 100%;
  border-bottom: 1px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.left {
  background-color: red;
  flex-shrink: 1;
  flex-grow: 1;
  height: 100%;
  line-height: 40px;
 }
 .right {
   background-color: blue;
   flex-grow: 1;
   flex-shrink: 0;
   max-width: 200px;
   height: 100%;
   line-height: 40px;
 }
<div class="container">
  <div class="left overflow">
    this text fills the remaineder of space and goes into ellpsis if it is too long for that space 
  </div>
  <div class="right overflow">
    this text has a max width of 200, is pinned to the right edge of the window, and goes into ellpsis if it overflows
  </div>
</div>

Upvotes: 0

Related Questions