Flexbox, как скрыть средний элемент, если он слишком длинный

Я не думаю, что вы можете сделать это с помощью чистого CSS. вам нужно сделать это с помощью javascript. проверьте мой пример ниже. это добавит класс hide (который имеет display: none CSS) в средний элемент, когда его ширина меньше 80 пикселей, и удалит hide, когда ширина больше 80. Знайте, что getBoundingClientRect() возвращает значение bottom, top, height, width, left, right, x, y элемента

const middle = document.querySelector(".middle")
if(middle.getBoundingClientRect().width < 80){
  middle.classList.add("hide")
} else {
  middle.classList.remove("hide")
}

.App {
  width: 100%;
  height: 60px;
  display: flex;
  align-content: space-between;
  gap: 20px;
}

.middle{
  width: 80px;
}

.hide{
  display: none;
}

<div class="App">
      <h1>LOGO</h1>
      <h2 class="middle">Start editing to see some magic happen! Long Title</h2>
      <h1>test</h1>
    </div>

и поскольку вы используете React здесь, вы можете использовать useEffect для обработки любого эффекта, такого как window.onresize()

вы можете использовать useRef хук, чтобы сделать это, допустим, вам нужно скрыть длинный текстовый элемент, ширина которого превышает 80 пикселей (предположим, что этот элемент является <h2> элементом.

import "./styles.css";
import {useRef} from "react";
export default function App() {
    const el=useRef();
  return (
    <div className="App">
      <h1>LOGO</h1>
      <h2 style={{display:el.current.getBoundingClientRect().width>80?"none":"block"}}>Start editing to see some magic happen! Long Title</h2>
      <h1>test</h1>
    </div>
  );
}

Хук useRef используется для ссылки на элемент Dom и getBoundingClientRect() возвращает размеры и местоположение элемента в виде чисел с плавающей запятой, а также высоту и ширину элемента. Таким образом, мы получаем доступ к его ширине через el.current.getBoundingClientRect().width

Вы можете скрыть переполнение, а затем поместить заголовок в другой flex с разделителями-заполнителями по бокам. Когда текст слишком длинный, он перемещается на следующую строку, которую невозможно увидеть.

.App {
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.inner {
  align-self: top;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
  min-width: 0;
}
.inner .hider {
  height: 60px;
  width: 1px;
  flex-grow: 1;
}
.inner h2 {
  overflow: hidden;
}

<div class="App">
<h1>LOGO</h1>
    <div class="inner">
        <div class="hider"></div>
        <h2>Start editing to see some magic happen! Long Title</h2>
        <div class="hider"></div>
    </div>
<h1>test</h1>
</div>