Почему при maxWidth элементы уезжают за пределы элемента React?

Есть компонент в котором можно изменять название загруженного на сайт файла.

import React, {useState, useContext} from 'react';
import classes from './FileNameInput.module.css';
import {FilesContext} from "./context";

const maxInputWidth = 20;
const replaceableSymbols = /[`|<>'"?*:/\\ ]/gi;

const removeBadSymbols = string => string.replace(replaceableSymbols, '-');
const parseType = name => name.split('.').pop();
const parseName = name => name.split('.').slice(0, -1).join('.');

const FileNameInput = ({file}) => {
    const {changeName} = useContext(FilesContext);
    const [width, setWidth] = useState(parseName(file.name).length);

    const changeFilename = e => {
        const newName = removeBadSymbols(e.target.value) + '.' + parseType(file.name);
        changeName(file, newName);
        setWidth(Math.min(maxInputWidth, parseName(file.name).length + 1));
    };

    return (
        <input
            className={classes.nameInput}
            style={{width: width + "ch"}}
            value={parseName(file.name)}
            onChange={changeFilename}
        />
    );
};

export default FileNameInput;
.nameInput {
    display: flex;
    font-family: 'Roboto Mono', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #2F2F2F;
    padding: 0;
    margin: auto 15px auto 0;
    border: 0;
    outline: none;
}

Сейчас если вводить все больше и больше символов в имя, инпут будет увеличиваться, пока не будет достигнута длина в 20 символов (константа сверху), потом инпут перестанет увеличиваться и строка внутри просто будет сдвигаться левее при вводе новых символов.

Но если немного уменьшить ширину страницы и ввести те же 20 символов, то все съедет в право. А как сделать так, чтобы его ширина была не больше, например, 50% от белой родительской панельки?

Если я делаю maxWidth: 50% в css файле, то почему-то при вводе символов уезжает стрелочка и чем больше символов, тем сильнее она уезжает пока не вытолкнет крестик, дальше становится как на 2 скриншоте


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