Guanlun Guanlun - 3 years ago 106
CSS Question

Flex layout: show first element when two child elements are in the same row

I have this simple template:


.outer {
display: flex;
width: 200px;

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

<div class="outer">
<div class="left inner">The quick brown fox</div>
<div class="right inner">jumps over the lazy dog</div>

The displayed result looks like
The quick b... jumps over th...

How could I make it try to fully display the first element before putting in the second one? If there's not enough space for the first part, simply drop the second one.

It should look something like
The quick brown fo...


Answer Source

You need to tell the .left that it shouldn't shrink. You can accomplish this by setting flex-shrink: 0;

.left {
  flex-shrink: 0;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download