Input doesn't respect flex container width
The reason it works in IE is because it picks up the flex-basis: 100%
, but it shouldn't.
The reason it overflows in Chrome (and should in IE), is that a flex item can't by default be smaller than its content since its min-width
is set to auto
, and in this case form
elements, such as input
, have a default width set using the browsers built it style sheet.
The reason min-width: 0
works, is when set to 0
the flex item will, since its flex-shrink value is 1
(the default), be allowed to shrink, and does to adjust to its parent's width.
Stack snippet
.input-with-button { display: flex; width: 100px; border: 5px solid blue; margin-bottom: 10px;}
.input-with-button input { flex-basis: 100%; min-width: 0; /* added */}
<div class='input-with-button'> <div>Test</div></div>
<div class='input-with-button'> <input></div>
input / button elements not shrinking in a flex container
An input
element, unlike a div
, comes with a default width.
Here's a simple illustration of this setting:
The browser automatically gives the input
a width.
input { border: 1px solid blue; display: inline;}
div { border: 1px solid red; display: inline;}
<form> <input> <br><br> <div></div></form>
Why don't flex items shrink past content size?
The Automatic Minimum Size of Flex Items
You're encountering a flexbox default setting.
A flex item cannot be smaller than the size of its content along the main axis.
The defaults are...
min-width: auto
min-height: auto
...for flex items in row-direction and column-direction, respectively.
You can override these defaults by setting flex items to:
min-width: 0
min-height: 0
overflow: hidden
(or any other value, exceptvisible
)
Flexbox Specification
4.5. Automatic Minimum Size of Flex
ItemsTo provide a more reasonable default minimum size for flex items, this
specification introduces a newauto
value as the initial value of
themin-width
andmin-height
properties defined in CSS 2.1.
With regard to the auto
value...
On a flex item whose
overflow
isvisible
in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to0
.
In other words:
- The
min-width: auto
andmin-height: auto
defaults apply only whenoverflow
isvisible
. - If the
overflow
value is notvisible
, the value of the min-size property is0
. - Hence,
overflow: hidden
can be a substitute formin-width: 0
andmin-height: 0
.
and...
- The minimum sizing algorithm applies only on the main axis.
- For example, a flex item in a row-direction container does not get
min-height: auto
by default. - For a more detailed explanation see this post:
- min-width rendering differently in flex-direction: row and flex-direction: column
You've applied min-width: 0 and the item still doesn't shrink?
Nested Flex Containers
If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto
/ min-height: auto
on items at higher levels.
Basically, a higher level flex item with min-width: auto
can prevent shrinking on items nested below with min-width: 0
.
Examples:
- Flex item is not shrinking smaller than its content
- Fitting child into parent
- white-space css property is creating issues with flex
Browser Rendering Notes
Chrome vs. Firefox / Edge
Since at least 2017, it appears that Chrome is either (1) reverting back to the
min-width: 0
/min-height: 0
defaults, or (2) automatically applying the0
defaults in certain situations based on a mystery algorithm. (This could be what they call an intervention.) As a result, many people are seeing their layout (especially desired scrollbars) work as expected in Chrome, but not in Firefox / Edge. This issue is covered in more detail here: flex-shrink discrepancy between Firefox and ChromeIE11
As noted in the spec, the
auto
value for themin-width
andmin-height
properties is "new". This means that some browsers may still render a0
value by default, because they implemented flex layout before the value was updated and because0
is the initial value formin-width
andmin-height
in CSS 2.1. One such browser is IE11. Other browsers have updated to the newerauto
value as defined in the flexbox spec.
Revised Demo
.container { display: flex;}
.col { min-height: 200px; padding: 30px; word-break: break-word}
.col1 { flex: 1; background: orange; font-size: 80px; min-width: 0; /* NEW */}
.col2 { flex: 3; background: yellow}
.col3 { flex: 4; background: skyblue}
.col4 { flex: 4; background: red}
<div class="container"> <div class="col col1">Lorem ipsum dolor</div> <div class="col col2">Lorem ipsum dolor</div> <div class="col col3">Lorem ipsum dolor</div> <div class="col col4">Lorem ipsum dolor</div></div>
Flexbox not respecting width
An initial setting of a flex container is flex-shrink: 1
.
This means that a flex item is allowed to shrink, in order to not overflow the container.
Instead of width: 290px
try this:
flex: 0 0 290px; /* can't grow, can't shrink, fixed at 290px */
Or just add flex-shrink: 0
to the rule (.callout-panel
) in order to disable shrinking.
For more details see:
- What are the differences between flex-basis and width?
- Flexbox - two fixed width columns, one flexible
Get form to respect flexbox parent div
Try this
.container { display: flex; width: 150px; border: 1px solid black;}form input{ width: 100%; box-sizing: border-box;}
<div class="container"> <span>foo</span> <span>bar</span> <form> <input value="baz"> </form></div>
Why does the width of my input grow so much?
Thanks to one of @Michael_B's comments, I managed to identify the issue. Browsers set a minimum width to input
tags.
- input / button elements not shrinking in a flex container
- Why doesn't the <input> element respect min-width?
I applied width: 0
on the input and the width scaled down to the value I was expecting.
Why don't flex items shrink past content size?
The Automatic Minimum Size of Flex Items
You're encountering a flexbox default setting.
A flex item cannot be smaller than the size of its content along the main axis.
The defaults are...
min-width: auto
min-height: auto
...for flex items in row-direction and column-direction, respectively.
You can override these defaults by setting flex items to:
min-width: 0
min-height: 0
overflow: hidden
(or any other value, exceptvisible
)
Flexbox Specification
4.5. Automatic Minimum Size of Flex
ItemsTo provide a more reasonable default minimum size for flex items, this
specification introduces a newauto
value as the initial value of
themin-width
andmin-height
properties defined in CSS 2.1.
With regard to the auto
value...
On a flex item whose
overflow
isvisible
in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to0
.
In other words:
- The
min-width: auto
andmin-height: auto
defaults apply only whenoverflow
isvisible
. - If the
overflow
value is notvisible
, the value of the min-size property is0
. - Hence,
overflow: hidden
can be a substitute formin-width: 0
andmin-height: 0
.
and...
- The minimum sizing algorithm applies only on the main axis.
- For example, a flex item in a row-direction container does not get
min-height: auto
by default. - For a more detailed explanation see this post:
- min-width rendering differently in flex-direction: row and flex-direction: column
You've applied min-width: 0 and the item still doesn't shrink?
Nested Flex Containers
If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto
/ min-height: auto
on items at higher levels.
Basically, a higher level flex item with min-width: auto
can prevent shrinking on items nested below with min-width: 0
.
Examples:
- Flex item is not shrinking smaller than its content
- Fitting child into parent
- white-space css property is creating issues with flex
Browser Rendering Notes
Chrome vs. Firefox / Edge
Since at least 2017, it appears that Chrome is either (1) reverting back to the
min-width: 0
/min-height: 0
defaults, or (2) automatically applying the0
defaults in certain situations based on a mystery algorithm. (This could be what they call an intervention.) As a result, many people are seeing their layout (especially desired scrollbars) work as expected in Chrome, but not in Firefox / Edge. This issue is covered in more detail here: flex-shrink discrepancy between Firefox and ChromeIE11
As noted in the spec, the
auto
value for themin-width
andmin-height
properties is "new". This means that some browsers may still render a0
value by default, because they implemented flex layout before the value was updated and because0
is the initial value formin-width
andmin-height
in CSS 2.1. One such browser is IE11. Other browsers have updated to the newerauto
value as defined in the flexbox spec.
Revised Demo
.container { display: flex;}
.col { min-height: 200px; padding: 30px; word-break: break-word}
.col1 { flex: 1; background: orange; font-size: 80px; min-width: 0; /* NEW */}
.col2 { flex: 3; background: yellow}
.col3 { flex: 4; background: skyblue}
.col4 { flex: 4; background: red}
<div class="container"> <div class="col col1">Lorem ipsum dolor</div> <div class="col col2">Lorem ipsum dolor</div> <div class="col col3">Lorem ipsum dolor</div> <div class="col col4">Lorem ipsum dolor</div></div>
Why does width and height of a flex item affect how a flex item is rendered?
An initial setting of a flex container is align-items: stretch
.
That means that flex items will expand across the cross axis of the container.
In a row-direction container, like in the question, the cross axis is vertical.
That means the items (images, in this case) will cover the full height of the container.
However, when a flex item has a defined cross size, that overrides the stretch
default.
From the spec:
8.3. Cross-axis Alignment: the
align-items
andalign-self
propertiesFlex items can be aligned in the cross axis of the current line of the
flex container, similar tojustify-content
but in the perpendicular
direction.
stretch
If the cross size property of the flex item computes to
auto
, and
neither of the cross-axis margins areauto
, the flex item is
stretched.
This is the key language:
If the cross size property of the flex item computes to
auto
And this is how the spec defines "cross size property":
The width or height of a flex item, whichever is in the cross
dimension, is the item’s cross size. The cross size property is
whichever ofwidth
orheight
that is in the cross dimension.https://www.w3.org/TR/css-flexbox-1/#cross-size-property
So your code appears to be playing out as defined in the spec.
This is what you have:
.flex-parent { display: flex; max-height: 10vh;}
<div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"></div>
Image size not respected in flexbox
An initial setting of a flex container is flex-shrink: 1
. This means that flex items are permitted to shrink in order to avoid overflowing the container. Disable flex-shrink
.
.original { float: left;}img { float:left; padding: 10px;}.vAlign { display: flex; align-items: center;}
img { flex-shrink: 0; } /* NEW */
<h1>Original Markup</h1><div class="original"><img src="http://via.placeholder.com/350x150" style="width:70%;"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd </p></div>
<h1>verticalign (But wrong img Size)</h1><div class="vAlign"><img src="http://via.placeholder.com/350x150" style="width:70%;"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p></div>
Why doesn't the input element respect min-width?
There is size="20"
set on <input>
type text
, search
, tel
, url
, email
, and password
... by default, which is approximately of 100px
width, although it can vary in a different browser and operating system.
On the parent, you have min-width:15px;
set, that does not take any effects, because the value is much smaller than 100px
. If you change it to width:15px;
or max-width:15px;
you will then see the differences.
Alternatively you can give the size
a very small value such as size="1"
.
Related Topics
How to Style: Root Without !Important Using Proper Specificity
How to Add Horizontal Scrollbar in a React Bootstrap Table
Showing Truncated Text Only on Hover with Vue
Mix-Blend-Mode Doesn't Work on Chrome
How to Edit My Angular Project's CSS Files Directly from Chrome Devtools
How to Combine Compass with Bless
How to Properly Handle Navbar Color Change on Scroll in Angular
Using HTML Attributes as CSS Property Values
Rails 3 - Referencing a CSS Class to Form Elements in an Object Dot Style
Background Images Not Showing in Ie11
Dynamically Changing Font, Font-Size, Font-Color, and So on in Vaadin Flow Web Apps
How to Do Less @Import Without @Import Literally
Floated Element Gets Outside of Its Parent
Django 1.8 Static Files Doesnt Work
Vertically Center a Div with Variable Height Within a Div That Is 100% of The Viewport
Jagged "Border" Showing Due to Background Colour on Wrapper Element with Border-Radius: 50%;