CODEWITHSUNDEEP
htmlcssflexbox
noi.m
noi.m

Reputation: 3132

Align two divs in a way that the second div gets all the space it needs

I have a container div that has two div's within it aligned at two ends (left and right). I am aligning using flex as shown below.

.box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 232px;
  height: 40px;
  margin: 0 auto;
  background-color: lightblue;
}

.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.number {
  font-size: 14px;
  text-align: right;
  background-color: lightblue;
}

When there is not enough space for the two divs to fit in the given width, i'd like the div on the right to take all the space it needs while the div on the right to shrink (and add ellipsis). However, in some cases, i still see the content in the 2nd div going to the next line. Is there anyway to avoid this? Notice, how in the example in jsFiddle, 'NUMBER' is pushed to next line.

http://jsfiddle.net/kLn9bm7w/

Upvotes: 1

Views: 84

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371341

Also add white-space: nowrap to the div on the right (.number).

.box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 232px;
  height: 40px;
  margin: 0 auto;
  background-color: lightblue;
}

.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.number {
    white-space: nowrap; /* new */
    font-size: 14px;
    text-align: right;
    background-color: lightblue;
}
<div class="box">
  <div class="name"><a href="#" target="_blank">Somereallylongtextcodssdmeshere</a></div>
  <mark class="number">21.0K NUMBER</mark>
</div>

Upvotes: 1

Related Questions