CSS "width: auto" is not working on <div>

Question

I want .test_info be width auto, not the same as the width of #test.

https://jsfiddle.net/ef6ukobf/

#test {
  background: #26A65B;
  height: 30px;
  width: auto;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
}
.test_info {
  background: #00ff00;
  border-radius: 5px;
  height: 20px;
  width: auto;
  margin-top: -2px;
  margin-left: 20px;
}

<div id="test">
  <div class="test_info">50</div>
</div>

Answer 1

The <div> element is block level, by default it takes the entire available width of the container.

If you want it to be auto width (depends on the content inside), you can do:

.test_info {
  display: inline-block; /*or table*/
}

#test {
  background: #26A65B;
}
.test_info {
  background: #00ff00;
  display: inline-block;
}

<div id="test">
  <div class="test_info">50</div>
</div>