Css Set Baseline Of Inline-block Element Manually And Have It Take The Expected Height

I'm designing a sea-sky component. I'd like to have it's baseline at sea-level. Here's an attempt that's rendering correctly. The trick here is to set a negative bottom and use a

Solution 1:

The problem is that you use bottom: -30px. Yes, aligns the sea with the text, but breaks the layout.

Instead, you should take advantage of inline-blocks having a very interesting baseline:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

That is, you only need to fill the sky part with some in-flow content. Since the sea part is already out-of-flow, it won't affect the baseline. Therefore, you can insert a pseudo-element is .outer which takes the remaining height left by .inner:

.outer::before {
  content: '';
  display: inline-block;
  height: calc(100% - 30px);
}

.out {
  display: inline-block;
  background-color: yellow;
}
.outer {
  display: inline-block;
  background-color: cyan;
  width: 100px;
  height: 100px;
  position: relative;
}
.outer::before {
  content: '';
  display: inline-block;
  height: calc(100% - 30px);
}
.inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background-color: blue;
}

<divclass="out">
  hello
  <divclass="outer"><divclass="inner"></div></div>
  foobar
</div>

To avoid that calc(100% - 30px) you can also use flexbox:

.outer {
  display: inline-flex;
  flex-direction: column;
}
.outer::before {
  flex: 1;
}

.out {
  display: inline-block;
  background-color: yellow;
}
.outer {
  display: inline-flex;
  flex-direction: column;
  background-color: cyan;
  width: 100px;
  height: 100px;
}
.outer::before {
  content: '';
  flex: 1;
}
.inner {
  height: 30px;
  background-color: blue;
}

<divclass="out">
  hello
  <divclass="outer"><divclass="inner"></div></div>
  foobar
</div>

But I think the CSS WG hasn't completely decided how baselines in orthogonal flows should behave, so I would recommend calc(100% - 30px) for now.