11
Content ignoring the maximum width in a Flexbox container in Firefox?
source link: https://www.codesd.com/item/content-ignoring-the-maximum-width-in-a-flexbox-container-in-firefox.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Content ignoring the maximum width in a Flexbox container in Firefox?
advertisements
Wondering if anybody else is experiencing the following and either found a solution or may have suggestions.
The code below renders correctly on Chrome (35.0.1916.153), but it does not on Firefox (Firefox 29.0.1):
.container {
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 2px solid red;
overflow: hidden;
}
.container img {
max-width: 100%;
}
HTML:
<div class="container">
<img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png"/>
</div>
A runnable example can be found here:
Add min-width: 1px; to the .container.
https://ntucker.true.io/ntucker/solution-firefox-34-ignoring-max-width-for-flexbox/
Related Articles
Div ignore the maximum width on the body
I've set a max-width on my body but I want one div to not have this max-width but have a full-width. HTML <body> <header> stuff here </header> <main> more stuff <div> The div I want to have a full-width </div> </main
How to set the maximum width for div content that consists of images and text
How can I set the maximum width for div's content (images and text) so it can shrink accordingly? https://jsfiddle.net/5tav89hw/3/ The expected behavior -- image shrinked to the 50px width. Thanks in advance.reset display of <a> to block and img's w
CSS - the center of the body ignores the min-width
This site has a "min-width:600px" in BODY, and uses a backgroundImage in Center. When I resize and It gets lower than 600px, it creates the scroll-bar, fine. But the background dont stop to center it.. The background ignore the min-width. My exa
The maximum width does not work on the flexible element
I have a flex container and two flex children in a column. The top div should fill all remaining space. The bottom div should have a height determined by the content and a max-width. But the bottom div's width is shrinking to the width of its content
WPF ListBoxItem does not extend to the maximum width
I am new to WPF. I am trying to make the first column in the OrderItemsTmpl template to stretch to the maximum width that is available, but it does not work, the width only up to the width of the text inside. I don't want to use an absolute value. Ho
Why does the maximum width have a minimum width in a table cell?
Setting max-width in a table cell to 250px will, paradoxically, prevent the cell (column) from getting smaller than 250px when the width of the table changes. At the same time, the maximum width does not seem to be constrained at all. ...why? Fiddle:
WrapPanel: When trying to make the Width element equal to the maximum width of an element
Hopefully no one else has already asked this question, but I have searched and cannot find any mention. Feel free to point me in the right direction if I missed another question that explains this. I have a WrapPanel with data-bound items that essent
the maximum width does not work for the table cell
For me, the expected behavior would be that the middle cell fills the whole space horizontally as long as its container is not wider than 500px. However, it doesn't matter how large I scale the page, the middle cell always fills up 100%, ignoring the
Always get the maximum width / column space required for a DataGrid
I'm trying to animate columns in a DataGrid. This also works perfectly. However, I always need the maximum width that wants to have a column, in order to calculate therefrom the ratio to the width of the DataGrid. This works on the first call. But as
Uploadify: Defining the maximum width and height of the image
I want to restrict the maximum width and/or height of an uploaded image (jpg, png, gif, bmp, ...). How can this be done with Uploadify? I can think of two general possibilities: check the image size before upload and output an error resize image afte
Android ignores the maximum scale when using a fixed-width viewport meta-tag
I have a fixed-width web page (640 pixels wide). I would like this page to shrink to the width of a mobile device. However, if the device's native width is larger than 640 pixels, I do not want it stretched. Seems simple enough: <meta name="viewpo
Set div to the width of the content with a maximum width
I have a div that contains a float left image and then text. It does the following. .outer-div { max-width: 95%; background-color: yellow; display: inline-block; } .image { float: left; } <div class="outer-div"> <img class="image&q
What is the maximum width of the content area for web pages?
Is there a standard max for the width of the main content area of a web page? I want to maximize screen real estate without affecting usability. I've seen a lot of sites stick to 980px or less. Anyone have any suggestions?I'm assuming you're referrin
How to ignore the parent width limit in CSS
An example of my code: Check this link https://jsfiddle.net/b5woxesg/ Explaining: My website's content was placed like this to keep itself in the center of the page. With width: in % and max-width: in px to not strech. This content is called from a M
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK