I have div element with min-width, min-height, max-width, and max-height styling applied. The div will simply contain text.
The desired behavior I want is for the div to grow horizontally to fit the contents until it reaches max-width, and only then, I want the height to increase towards max-height as needed to fit the text contents.
The behavior right now is that the div stays at min-width and expands veritcally. How can I get the desired behavior?
UPDATE: The code:
.tooltip-body
{
max-width: 265px;
min-width: 200px;
min-height: 34px;
max-height: 46px;
}
<div class="tooltip-body">And the text goes here...</div>
Related
I'm trying to make an image overflow it's container. I have set the image to 100% height, and it's stretching. I want instead for it to overflow its container's width (I need to then hide that overflow). It's the right most part of the image I'm interested in.
Code coming...
If you set the height of the image to 100% of its container and if nothing is specified about the width, the width should change proportionately i.e. if too wide it should overflow as required. There should be no stretching.
.container {
width: 200px;
height: 200px;
border: solid 10px red;
}
.container img {
width: auto;
height: 100%;
}
<div class="container">
<img src="https://picsum.photos/id/1016/500/300" />
</div>
So, is there something else in your CSS that is causing the stretching? e.g. are img widths set somewhere? (Hence, just in case, the width is explicitly set as auto in the snippet).
In the old days before having max-width and min-width, we have to set the width to some value other than auto, together with margin-left and margin-right to auto, for the div to be horizontally centered.
Now that we have max-width and min-width, we can also set the max-width to some value other than none to horizontally centered it? Is there any spec for it?
P.S. min-width won't work as the div will span the whole width, so you can consider it horizontally centered, except that the left and right margin are both 0, so there is no horizontally centering effect.
Example:
width: https://jsfiddle.net/dtr7t4z7/1/
max-width: https://jsfiddle.net/dtr7t4z7/2/ and https://jsfiddle.net/dtr7t4z7/3/
min-width: https://jsfiddle.net/dtr7t4z7/4/
margin: auto will just fill the remaining space equally on both sides. If a width or max-width are not specified, a div will take up as much horizontal space as possible. Because the div is the full width of its container when only min-width is specified, there isn't any space left for margin: auto to distribute.
https://jsfiddle.net/ehnvy1xz/5/
body{
display:flex;
justify-content:center;
}
#line {
text-align:center;
background: yellow;
min-width: 200px;
}
If you really need the min-width. I would recommend using flex on the parent div and centering it that way instead.
As a beginner front-end developer, I find it hard to understand when to use height, min-height and max-height.
I was reading through the docs on MDN about the max-height property and its use in conjunction with height.
According to the docs,
max-height overrides height, but min-height overrides max-height.
But what I don't get is that if we have a div, set a height and max-height, the height seems to take precedence.
For example:
HTML:
<div class="wrapper">
A text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
CSS:
.wrapper {
width: 100px; background-color:red; height: 100px; max-height: 1000px;
}
JSBin: https://jsbin.com/kovama/13/edit?html,css,output .
Why doesn't the max-height override height ?
The div only seems to grow as large as the content when I remove the height property.
Moreover, when it is stated that min-height overrides max-height it is only when min-height is actually larger than max-height, is that correct? I find the wording a bit confusing.
Think of min-height and max-height as the minimum and maximum valid calculated value for height.
So if you set min-height:100px; and max-height: 1000px; the element will always have a height between 100 and 1000px. So if you set the height to 500px, then that value is in the allowed range, and that is used as the real height.
But if you set height to 2000px, then than is not within the allowed range, so the height will be reduced to 1000px, so it comes within the allowed range.
But setting both max-height and height in px, don't make a lot of sense. Because then the smallest of max-height and height will always be used.
The normal use is to combine % and px.
if you set something like width:100%; max-width:700px; Then you have set the width to 100% of the available space, but it should still newer be more then 700 pixel.
You can also do it the other way:
width:50%; min-width:500px; This will use half the available space, but always at least 500 pixels.
To better illustrate this here are some examples:
.box {
width: 50px;
height: 50px;
background: red;
display: inline-block;
}
/* box1 will have the height 50px because it doesn't exceed 400px */
.box1 {
max-height: 400px;
}
/* box2 will have the height 40px,
so in this case max-height overrides the height property
This happended because the height of the div was exeeding the maximum allowed
*/
.box2 {
max-height: 40px;
}
/* box3 will have the height 80px
This happens because we said that the minimum should be 80px
so the height and max-height properties are ignored
*/
.box3 {
max-height: 40px;
min-height: 80px;
}
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
if you set min-height you will apply a minimum limit of height on the div, the height of the div cannot go below that minimum height. Similarly, max-height limits the height of the div to not go more than what set on max-height. Take an example :
div {
min-height: 500px;
max-height: 1000px;
}
from the above css, the height of the div can be anything between 500px and 1000px (both inclusive), the actual height (visible height) will be auto adjusted between this range according to the contents it holds. Now see this css -
div {
height: 600px;
min-height: 500px;
max-height: 1000px;
}
by using the above css, div height is by default set to 600px if content is short then space will appear at the bottom of the div because the height has been fixed to 600px, in case the content wants to expand the div, it will do that, but it will expand to 1000px only.
I have a centered div with fluid width, bound by a max-width:
#content {
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: 760px;
width: 80%;
}
I'm having trouble filling the space on the left and right of it due to the max-width property. How do I make also fluid divs to the left and right that will fill the empty space, even when the content div is constrained by the max-width? Preferably in a pure CSS way.
Use min-width with the 80%? Also perhaps use box-sizing to ensure the percentage values are treated at their true value.
Potential solution here http://jsfiddle.net/vSRgS/1
Let's say I have a CSS DIV that holds formatted syntax code. The DIV is set to a min-width:100; and a max-width:100;
This same DIV has another CSS declaration for when the DIV is Hovered, max-width: 135% !important; and min-width: 135%;
So if the DIV holding the formated code is wider then the DIV's width, it shows a scroll bar and when you hover over the DIV it expands the DIV to the width of the code not to exceed 135%, if the DIV's code does not exceed the width of the DIV then the DIV stays the same width.
My problem, is that when a div exceeds the 100% width, it expands to the width of the code inside but stays LESS then 135%, is there a way to make it expand to 135% even if the code is not 135% but is over 100%?
Hopefully this makes sense
I almost need some kind of conditional statement that says...
If DIV contents are > 100% then make DIV 135% on Hover otherwise leave DIV at 100%
Is this even possible?
Here is my full CSS
.syntax {
min-width: 100%;
max-width: 100%;
margin: 1em 0 1em 0;
position: relative;
overflow-y: hidden;
overflow-x: auto;
font-size: .9em;
display:inline-block;
}
.syntax:hover {
max-width: 135% !important;
min-width: 135%;
}
I'm not sure I'm getting waht you mean, but if I'm not mistaken, all you're leaving aside is this:
min-width: 135% !important;
you may need to adjust overflow depending on what you need
A better option would be to use fixed sizes, but if you're working on adaptive layout environments guess that is a no go