.main {
width: max-content;
}
то инпут возмет себе ширину первого родителя с указаной шириной - тогда он будет 100vw (а не 30vmin) <form action="" onsubmit="sub()" id="f">
<input type="text" required>
<input type="text" required id="test">
<button type="submit">send</button>
</form>
<script>
function sub() {
alert("checking");
if (!document.getElementById("f").checkValidity()) {
alert("invalid fields");
} else {
alert("valid fields");
}
}
</script>
<form action="">
<input type="text" required oninvalid="invalid(event)">
<input type="text" required oninvalid="invalid(event)">
<button type="submit" onclick="submitForm()">send</button>
</form>
<script>
function invalid(event) {
event.preventDefault();
alert("invalid field");
}
</script>