<div id="app">
  <div class="container">
    <button>Edit</button>
    <button>Save</button>
    <button>Copy</button>
    <button>Rename</button>
    <button>Delete</button>
    <button>Share</button>
  </div>

  <p>Container Size</p>
  <div class="change-size">
    <button value="100%">100%</button>
    <button value="1400px">1400px</button>
    <button value="300px">300px</button>
    <button value="150px">150px</button>
  </div>
</div>
.container {
  display: flex;
  width: 100%; /* This can be changed via the buttons. */
  padding: 8px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffe2e4;

  &.container-vertical {
    flex-direction: column;
    align-items: stretch;
  }

  button {
    border: 0;
    cursor: pointer;
    margin: 0.25rem;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 0.25rem;
    background: #ed3c3c;
    color: #fff;

    &:hover {
      background: #b01a1a;
    }
    &:active {
      background: #e86f6f;
    }
  }
}

/* The rest is just setup */

html,
body,
#app {
  min-height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  padding: 16px;
}

p {
  margin-top: 32px;
  text-align: center;
  color: #4c11f7;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.change-size {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  button {
    width: 100px;
    margin: 2px;
    padding: 12px 20px;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: #4c11f7;
    color: #fff;
    cursor: pointer;

    &:hover {
      background: #3000e0;
    }
    &:active {
      background: #5c00ff;
    }
  }
}
View Compiled
/* Attach ResizeObserver to the container. */
const resizeObserver = new ResizeObserver(onResize);
resizeObserver.observe(document.querySelector(".container"));

let rowWidth;

function onResize(entries) {
  const entry = entries[0];
  const container = entry.target;
  if (!rowWidth)
    rowWidth = Array.from(container.children).reduce(
      (acc, el) => getElWidth(el) + acc,
      0
    );
  const isOverflowing = rowWidth > entry.contentRect.width;
  if (isOverflowing && !container.classList.contains("container-vertical")) {
    requestAnimationFrame(() => {
      container.classList.add("container-vertical");
    });
  } else if (
    !isOverflowing &&
    container.classList.contains("container-vertical")
  ) {
    requestAnimationFrame(() => {
      container.classList.remove("container-vertical");
    });
  }
}

/* Get the width of an element, including margin */
function getElWidth(el) {
  const style = getComputedStyle(el);
  return (
    el.getBoundingClientRect().width +
    parseFloat(style.marginLeft) +
    parseFloat(style.marginRight)
  );
}

/* The rest is for the container size buttons. */
function changeSize(e) {
  if (!e.target.value) return;
  const container = document.querySelector(".container");
  container.style.width = e.target.value;
}

const changeSizeButtons = document.querySelector(".change-size");
changeSizeButtons.addEventListener("click", changeSize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.