Почему при 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 скриншоте


