How to adjust divs to decrease their size as you add new sister divs?

Question

I need a parent div to occupy the entire width of the screen and when adding child divs inside the parent div, the child divs will decrease the width so that they all fit inside the parent div without having scrool. Equal behavior of browsers when adding new tabs.tabs

Answer 1

One easy way to do this is with display: table. It works in current modern browsers.

#wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100px;
}

#wrapper div {
  display: table-cell;
  height: 100px;
}
#one {
  background-color:green
}
#two {
  background-color:blue
}
#three {
  background-color:red
}

<div id="wrapper">
  <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
  <div id="two">two two two two two two</div>
  <div id="three">three</div> 
</div>

Example : http://jsfiddle.net/dokve351/

Answer 2

You can try

.parent{
display : flex-shrink;
}
.child{
width : auto
max-width : 100px;
min-width : 10%;
}

Thats with basic CSS, if you are using React there will be an easier code.