On element resize, resize the sibling elements too

Question

I'm trying to horizontaly resize one div using css property resize: horizonatal. There are other elements right to this div with a padding of 10px that need to follow resizable div whenever it is resized. I'm not sure what would be the best approach to do the resizing? I found some articles about DOM Monitoring, but was wondering if there is a "simpler" way to do this.

Without knowing how are you resizing the element, I'd suggest you to use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). — Teemu, Feb 26 '21 at 10:45
Can you give us a minimal working example of your current code? This way we can better understand your current problem — Alex Berger, Feb 26 '21 at 10:57
**JavaScript** is your solution I'm *afraid*: See: https://stackoverflow.com/q/46931103/383904 — Roko C. Buljan, Feb 26 '21 at 11:01

score 0 · Accepted Answer · answered Feb 26 '21 at 12:34

You can wrap your elements in a container with display: flex. If you tell your non-resizable element to take up the remaining space, they should flow with the resized elements before them automatically.

Here's a runnable example:

.container {
  display: flex;
}

.non-resizable {
  flex-grow: 1;
  background: pink;
}


.resizable {
  resize: horizontal;
  overflow: auto;
  border: 1px solid black;
  margin-right: 12px;
}

<div class="container">
  <div class="resizable">Hello</div>
  <div class="non-resizable">world!</div>
</div>

On element resize, resize the sibling elements too

1 Answers1