Forcing a width on flex items

When my screen breaks at around 650px my age input is squeezed in on the right. Could anyone offer advice as to how to force a width with some reasoning behind their method please! Last post tonight… Promise :stuck_out_tongue:

You can add width: 100% to the input elements for the first fieldset group.

#survey-form fieldset:first-of-type input {
  width: 100%;

Not sure I can give you a great explanation but it is caused by the min attribute on the number input element. At least in Chrome, it does seem to happen in Firefox. Looks more like a bug in Chrome really.


Hi Codemiester,

your having a this issue because flex box settings default to

you can override this issue by setting

min-width: 0;
I just tested this on your code and it works fine.

below is an example in your CSS code.

.flex {
    display: flex;
    flex-direction: column;
    border: solid red 3px;
    margin: 0 auto 1em auto;
    width: 100%;
    min-width: 0;

I hope that helps

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks for your answer and the information!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.