Flex items are stretching [duplicate] - html

Question

This question already has answers here:
Make flex items take content width, not width of parent container
(3 answers)
Closed 1 year ago.
How do I avoid items in flex column stretching to full width? I want it to be original size as created.
.myForm {
display: flex;
flex-direction: column;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>

Answer 1

In CSS the default value for the flex property align-items is stretch which as you would guess stretches the children of the flex parent to full width. You can change it something else to fix that. For instance
.myForm {
display: flex;
flex-direction: column;
align-items: flex-start;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>
Read more about this property here https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Answer 2

Use max-width: max-content;, or width: max-content; on child element.
.myForm {
display: flex;
flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
max-width: max-content;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>

Answer 3

You mentioned display:flex; so your elements size is also flexed to column size.
You can provide css property for your first level child individually like
.myForm > * {
width: fit-content;
}
.myForm {
display: flex;
flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
width: fit-content;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>