Responsive input component margin - html

Question

I have input component that takes full size based on maxWidth property and can shrink on screen size changes.
Problem is that margin is not consistent with maxWidth in pixels, but ok if input is 100%. Also centering input have it's own padding problems, but i think it's the same problem.
How to limit max-width of input with respect of paddings and save flexibility to shrink?
Codesandbox (you can fork it and change).
import * as React from "react";
import styled from "styled-components";
interface Props extends React.ComponentPropsWithoutRef<"input"> {
maxWidth?: string;
}
const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
return <StyledInput ref={ref} {...props} />;
});
const defPadding = 5;
const StyledInput = styled.input<Props>`
box-sizing: content-box;
margin: 5px;
vertical-align: middle;
padding: ${defPadding}px 0;
box-shadow: inset 0 0 0 1px blue;
border-radius: 5px;
border: none;
outline: none;
font: inherit;
max-width: calc(
${({ maxWidth }): string => maxWidth || "100%"} - ${defPadding * 2}px
);
width: 100%;
text-align: center;
`;
export default function App() {
return (
<div className="App">
<div>
<Input />
<Input maxWidth="1000px" />
</div>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}}
>
<Input />
<Input maxWidth="1000px" />
</div>
</div>
);
}

Answer 1

If I understand the question right, the issue is not about paddings but those side 5-pixel-margins instead.
You can update the styles slightly so that
<Input maxWidth="1000px" /> extends as much as possible, but not beyond 1000px. The end CSS result should be:
width: 1000px;
max-width: calc(100% - 10px);
In your component styles try:
const StyledInput = styled.input<Props>`
box-sizing: content-box;
margin: 5px;
vertical-align: middle;
padding: ${defPadding}px 0;
box-shadow: inset 0 0 0 1px blue;
border-radius: 5px;
border: none;
outline: none;
font: inherit;
max-width: calc(100% - ${defPadding * 2}px);
width: ${({ maxWidth }): string => maxWidth || "auto"};
text-align: center;
`;
If this is your goal, maybe the margin: 5px should also use the defPadding variable.