CODEWITHSUNDEEP
css
roman-v1
roman-v1

Reputation: 778

CSS: How to shrink first div in container instead of going outside of container

User can change width of container, it can be shorter than space needed for both containers. What I need is shrink first container if such situation happens. Here expected result: "First div con...Second div content". Is there possible way to do it for all modern browsers? (latest Chrome, Firefox and IE 11 needed). Here html code from example "https://plnkr.co/edit/rH3ABKvFRltvAL1rXqkr?p=preview":

<div class="container">
  <div class="first">first div content</div>
  <div class="second">second div content</div>
</div>

Upvotes: 0

Views: 98

Answers (1)

Oriol
Oriol

Reputation: 288010

You can use flexbox:

.container {
  background-color: gray;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  white-space: nowrap
}
.first {
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="container">
  <div class="first">first div content</div>
  <div class="second">second div content</div>
</div>

Upvotes: 1

Related Questions