Некоторые компоненты div-панели навигации отображаются за пределами панели навигации. Может ли кто-нибудь помочь мне с э ⇐ CSS

[Anonymous]

Я пытался создать проект реагирования на визуализатор сортировки.
Этот проект включает в себя компонент навигационной панели с различными алгоритмами сортировки, ползунок для изменения размера массива и кнопку создания для создания случайного массива. Файлы JSX и CSS следующие:
это страница jsx

Код: Выделить всё

import React from "react";
import { useState } from "react";
import "./SortingVisualizer.css";

function SortingVisualizer() {
let [arr, setArr] = useState([]);
let [range, setRange] = useState(0);

const randomIntFromInterval = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
const resetArray = () => {
let newArray = [];
for (let i = 0; i < range; i++) {
newArray.push(randomIntFromInterval(5, 550));
}
setArr(newArray);
};

return (


{range}
 {
setRange(event.target.value);
}}
/>
Generate
Bubble Sort
Selection Sort
Insertion Sort
Quick Sort
Merge Sort
Heap Sort

{arr.map((num, id) => (

‎

))}


);
}

export default SortingVisualizer;

а это CSS-файл для файла JSX

Код: Выделить всё

.ice-pick {
text-align: center;
}

.element {
display: inline-block;
width: 5px;
margin-left: 1px;
margin-right: 1px;
background-color: rgb(77, 165, 184);
top: 40px;
}

.nav-bar {
background-color: black;
opacity: 75%;
height: 80px;
}

.range-value {
position: relative;
display: block;
margin-left: 110px;
font-size: 30px;
color: #999;
font-weight: 400;
}
.range {
width: 200px;
height: 15px;
-webkit-appearance: none;
margin-left: 20px;
background: #111;
outline: none;
border-radius: 15px;
overflow: hidden;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #0dd69d;
cursor: pointer;
border: 4px solid #333;
box-shadow: -407px 0 0 400px #00e8fd;
}

button {
margin-left: 20px;
border-radius: 7px;
padding: 5px 10px;
border: none;
background-color: #00e8fd;
}

button:hover {
box-shadow: 0 0 10px 2px #00e8fd;
}

после запуска сервера некоторые компоненты навигационной панели, то есть алгоритмы сортировки внутри div «nav-bar», отображаются за пределами навигационной панели. Я пробовал использовать различные стили в CSS, но не смог решить проблему.

Подробнее здесь: https://stackoverflow.com/questions/784 ... e-the-navb