Flex элементы перекрывают друг друга

Question

При горизонтальном ресайзе страницы, кнопки налезают друг на друга. По задумке они не должны перекрывать друг друга, а должны выстроиться в линию с учетом gap между ними. Как поправить чтобы работало правильно?

.panel {
  position: sticky;
  top: 0;
  height: 4rem;
  background: pink;
  border-bottom: 1px solid #000;
  display: flex;
  padding: 0 1rem;
  gap: 1rem;
}

.panel__left,
.panel__center,
.panel__right {
  flex-grow: 1;
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 1rem;
}

.panel__left {
  justify-content: flex-start;
}

.panel__center {
  justify-content: center;
}

.panel__right {
  justify-content: flex-end;
}

.button {
  border: 1px solid #000;
  padding: .3rem .8rem;
  border-radius: 5px;
}

<div class="panel">
  <div class="panel__left">
    <div class="button">LEFT</div>
  </div>
  <div class="panel__center">
    <div class="button">CENTER</div>
  </div>
  <div class="panel__right">
    <div class="button">RIGHT</div>
  </div>
</div>

Answer 1

Если с помощью js рассчитать размер обьектов и после сделать например смену стилей на display: inline-block;


let marginEl = 20; //px

window.addEventListener("DOMContentLoaded", ()=>{
    let block1 = document.querySelector(".panel__left");
    let block2 = document.querySelector(".panel__center");
    let block3 = document.querySelector(".panel__right");
    let width = block1.offsetWidth + block2.offsetWidth + block3.offsetWidth + (marginEl * 2);
    let css = "";
    css += "@media screen and (max-width: " + width + "px) {";
    css += ".panel__left { position: relative; display: inline-block; margin-left: " + marginEl + "px;}";
    css += ".panel__center { position: relative; display: inline-block; margin-left: " + marginEl + "px;}";
    css += ".panel__right { position: relative; display: inline-block;}";
    css += "}";
    let el = document.createElement("style");
    el.innerHTML = css;
    document.head.appendChild(el)
})

Answer 2

Заменить display: flex на display: inline-flex ?

.panel {
  position: sticky;
  top: 0;
  height: 4rem;
  background: pink;
  border-bottom: 1px solid #000;
  display: inline-flex;
  padding: 0 1rem;
  gap: 1rem;
}

.panel__left,
.panel__center,
.panel__right {
  flex-grow: 1;
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 1rem;
}

.panel__left {
  justify-content: flex-start;
}

.panel__center {
  justify-content: center;
}

.panel__right {
  justify-content: flex-end;
}

.button {
  border: 1px solid #000;
  padding: .3rem .8rem;
  border-radius: 5px;
}

<div class="panel">
  <div class="panel__left">
    <div class="button">LEFT</div>
  </div>
  <div class="panel__center">
    <div class="button">CENTER</div>
  </div>
  <div class="panel__right">
    <div class="button">RIGHT</div>
  </div>
</div>

БЛОГ НА HUSL

Flex элементы перекрывают друг друга

Ответы (2 шт):