mxiong mxiong - 1 year ago 91
CSS Question

Using CSS, how do you anchor an element to a baseline and size it based on another "pinned" element?

Here's an image of what I'm referring to:

enter image description here

If you have some fixed height

from the baseline that the pin lies, and the green element is dynamically sized, how can you make the orange element take the space between the two?

Answer Source

Have exactly what you need in this case using a flexbox.

Check it out and let me know your feedback on this. Thanks!


How about now?

The pin approximately stays at the same height above the baseline give or take 1px.

How it works: When the green element grows say 10px the pin is elevated by 5px. But the flex setup means the dummy and the orange box reduces 5px each thus keeping the pin at a contant height.

* {
  box-sizing: border-box;
body {
  margin: 0;
  padding: 0;
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
  border-bottom: 1px solid black;
.dummy {
  flex: 1;
.top {
  height: 20px;
  width: 20px;
  border: 1px solid green;
  position: relative;
.top div {
  position: absolute;
  height: 3px;
  width: 3px;
  background: #880015;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
.bottom {
  width: 50px;
  border: 1px solid orange;
  flex: 1;
<div class="wrapper">
  <div class="dummy"></div>
  <div class="top">
  <div class="bottom"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download