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.

2 Likes

Hi Codemiester,

your having a this issue because flex box settings default to
min-width:auto;

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!