Как я могу предотвратить переход элементов на новую строку из-за поля?

Question

Я пытаюсь выстроить все элементы в одну строку. Я хотел сделать этот динамический c, чтобы ширина, которую я использовал, была в процентах. Случается, что некоторые элементы переходят на новую строку. Я понимаю, что это происходит из-за поля и что ширина не включает маржу в расчет. Что мне делать?

Вот мой код:

import React, { useState, useEffect } from 'react';

const randomIntFromInterval = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

const Dummy2 = () => {
    const [arr, setArr] = useState([]);
    const [length, setLength] = useState(10);

    useEffect(() => {
        generateArray();
    }, [length]);

    const generateArray = () => {
        const temp = [];
        for(let i = 0; i < length; i++) {
            temp.push(randomIntFromInterval(7, 107));
        }
        setArr(temp);
    }

    const handleLength = (e) => {
        setLength(e.target.value);
    }

    const maxVal = Math.max(...arr);

    return (
        <div>
            <div className="array-container" style={{height: '50%'}}>
                {arr.map((value, idx) => (
                    <div className="array-element"
                         key={idx}
                         style={{height: `${(value * 100 / maxVal).toFixed()}%`,
                                 width: `${100 / length}%`,
                                 margin: '0 1px',
                                 display: 'inline-block',
                                 backgroundColor: 'black'}}
                    ></div>))
                }
            </div>
            <div>
                <button onClick={() => generateArray()}>New array</button>
            </div>
            <div className="slider-container">
                1
                <input type="range" 
                       min="1" 
                       max="100" 
                       onChange={(e) => handleLength(e)} 
                       className="slider" 
                       id="myRange" 
                />
                100
            </div>
            {length}
        </div>
    );
}

export default Dummy2;

Answer 1

Вы пробовали использовать функцию calc() CSS для расчета ширины? Он позволяет комбинировать пиксели и процент, поэтому вы можете вычесть маржу из ширины элемента.