What's wrong with the containers

Question

changing overflow property of the second container to "hidden" somehow breaks the surrounding container:

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;
  display: inline-block;
  
  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

The reason is not the overflow, it's display: inline-block;:

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;

  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>

Edit:

If it must be display: inline-block;, add vertical-align: text-bottom;:

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;
  display: inline-block;
  vertical-align: text-bottom;
  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>

I need it to be inline-block – qucumbah Jun 02 '19 at 09:31 — qucumbah, Jun 02 '19 at 09:31

What's wrong with the containers

1 Answers1

Edit: