CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 3615

Making a dynamic size div overflow in a surrounding div with two fixed divs after

I have the following:

surrounding div 100% | dynamic div with a tag... | fixed div 30px | fixed div 30px.

I want to be able to change the width of the browser, shrinking the surrounding div and collapsing the dynamic div with a tag. Nothing I try seem to work without setting a width for the dynamic div.

| dynamic div... | fix1 | fix2 |

to:

| dynam... | fix1 | fix2 |

I've tried using floats and table, table-cell but the dynamic cell will never go less than the width of it's content without setting a static width.

NOTE: The dynamic div contains an A tag.

Upvotes: 0

Views: 30

Answers (1)

zsawaf
zsawaf

Reputation: 2001

Is this what you're looking for?

HTML

<html>
  <head></head>
  <body>
    <div class="main-container">
      <div class="dynamic">
        <p>Content content content content content content content content content content content content content content</p>
      </div>
      <div class="fixed">
        <p>This is fixed</p>
      </div>
      <div class="fixed">
        This is also fixed
      </div>
    </div>
  </body>
</html>

SCSS

.main-container {
  display: flex;
  align-items: center;
  flex-wrap: no-wrap;
  .dynamic {
    width: 100%;
    min-width: 0;
    p {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .fixed {
    flex-basis: 30px;
    padding: 5px;
  }
}

http://codepen.io/zsawaf/pen/VjXjbp

Note that you can put whatever you want inside the dynamic container.

Upvotes: 1

Related Questions