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


Tags: css,css3

Problem :

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>


Solution :

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>


    CSS Howto..

    CSS Sprites - How to hide the balance portion of the image

    How to (and how not to) load a css file that uses @font-face

    How to dynamically add a CSS class and implement its style in JavaScript

    How to remove reference of specific CSS files files from View

    How to reverse a jQuery animation back to original CSS properties

    How can i center the list items inside my unordered list?

    How to set height of my web page in html5

    How to create a 100% fixed footer with a fixed width center transparent gap?

    How to get similar effect on menu

    CSS - How it works

    How to serve css files in djangos's flatpages?

    How to make div expand width 100% responsively?

    How can I apply an external CSS class to a span created with dojo.create?

    How do I prevent text from flowing onto different sections of a page?

    How to use the computer modern font in webpages?

    How do I get this CSS/jQuery menu to open only on click, rather than hover?

    CSS box-shadow shows weird white region?

    Timeline divs not showing in Safari 5

    How to get a list of css attributes of an element with jquery

    showing/hiding content is not working in JQuery/CSS

    how to append an icon to an input search?

    jQuery - How to improve the logic for toggling inline css and class name while clicking activated buttons and hovering non-activated buttons?

    How to implement this kind of blur effect?

    How to fix text running off screen and breaking layout without using CSS word-break property?

    How to prevent span tags overlapping each other?

    Learning CSS, how to use stylesheet with master page

    How to float element next to line?

    How to enlarge and shrink an element in a loop animation through jquery or CSS

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    How to change css background color dynamically in php using color from database