CSS Width 100% or Max-Width in Pixels

CSS width 100% OR max-width in pixels

That's in fact the intended use of max-width. If the computed (actual) width of an element exceeds max-width, it will be constrained to the max value instead of going beyond it. Percentage versus pixels isn't relevant.

Declare both in the same rule like this (no need for the calc() function):

#somediv {
    width: 100%;
    max-width: 512px;
}

width in pixels ignoring max-width:100%

Your container (body) is width: 640px.

The child of body (the #flex-container) is width: 100%. In other words, 640px.

Your left-side flex item (#sidebar) is min-width: 150px. For argument's sake: width: 150px.

Your right-side flex item (#main-content) is width: 100%. Computing to: 531.989px (reason tbd).

The child of #main-content (.page) is width: 100%. Also, 531.989px

The child of .page (.grid) is width: 500px. This fits well into the parent, with extra space (31.989px) left over.

Your max-width: 100% never sees any action. It works, it just isn't called upon.

In your second example, you apply width: 800px to the .grid equivalent, which is greater than 531.989px, so max-width: 100% is called into action.

---

Flex items minimum size

Note that by default a flex item will not shrink past the size of its content.

Add min-width: 0 to #main-content.

Explanation: Why doesn't flex item shrink past content size?

---

Syntax Errors

Also note that your line commenting syntax...

.grid {
  width: 500px; // For some reason this ignores max-width when is defined in units.
  max-width: 100%;
  height: 200px;
  background-color: red;
  color: white;
  padding: 16px;
  box-sizing: border-box;
}

.... and parenthesis around the flex property...

#sidebar{
  min-width:150px;
  flex(0, 1, 150px);
  background-color: #7f8c8d;
}
#main-content{
  width:100%;
  flex(1, 1, auto);
  background-color: white;
}

are causing significant problems.

Revised Fiddle

Max-width px width 100%

You forgot the semi-colons after the width rules.

<div class="container">
    <h2>Dynamically populated using PHP</h2>
    <p>Dynamically populated using PHP</p>
</div>

.container {max-width:1200px; width:100%; background-color: red;}
.container h2 {max-width:400px; width:100%; background-color: blue;}
.container p {max-width:900px; width:100%; background-color: green;}

http://jsfiddle.net/kr1b92mu/

I added the background colors to show that it's working :).

How to set a max-width as percent AND pixels?

width:20%;
max-width:100px;

This sets the width to 20% but caps it at 100 px.

How to specify BOTH max-width % and px

You don't actually need to do anything as your current code should do exactly what you have asked. Adding the max-width and max-height to your images will restrict the width and height but will never cause them to increase beyond the images' initial dimensions. As a result, the image will shrink if needed but never grow, exactly as you've asked.

CSS width and max-width combined

Add

display: block;

to the table element's style attribute (preferably in a CSS file or the <style> section of the document rather than as in inline style).

<div> elements have display: block by default, while <table> elements have display: table; by default. Your problem is that the max-width property only applies to block elements, so you have to apply display: block; to the table.

Setting canvas width 100% and max-width

The drawing API dimensions for the canvas element does not need to match the CSS dimensions that it occupies on the screen. This allows one to do sub pixel graphics if they so desired, (to create smooth motion with anti aliasing). So the canvas width of 100% means nothing it wants the number of pixels it should be using, I believe you get the default width of 400 as if no width was used at all. However it can be changed with javascript to any width you would like.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width(); 
canvas.height = 630;

Or to do anti-aliasing.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width()*2; 
canvas.height = 630*2;

Set the canvas width to a number higher that the space it has on the screen. Each canvas pixel only takes up 1/2 an actual pixel and movement looks more video like.

Update added jsfiddle

http://jsfiddle.net/juaovd7o/

<canvas id="myCanvas" width="284px" height="120px">hello</canvas>
<canvas id="myCanvas2" style="width:284px;height:120px;"></canvas>
<img src="http://whitedove-coding.com/static/whitedove-829.png" id="dove">

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(0, 0, 284, 120);
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();
 var canvas2 = document.getElementById('myCanvas2');
      canvas2.width=568;
      canvas2.height=240;
      var context2 = canvas2.getContext('2d');
      context2.beginPath();
      context2.rect(0, 0, 568, 240);
      context2.lineWidth = 4;
      context2.strokeStyle = 'black';
      context2.stroke();
var img=document.getElementById("dove");
      context2.drawImage(img,0,0);
      context.drawImage(img,0,0);

The width attrib will set both the css and the API width if they are not set by other means, but 100% width is not valid for the API so the API falls back to its default width of 400px.

Per your question, you need to use both the CSS width of 100% and set the canvas API with or to whatever number of pixels that will be? jquery $(window).width() gives us the pixel count of 100%.

---

Related Topics