This question already has answers here:
input / button elements not shrinking in a flex container
(7 answers)
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
Somewhy inputs do not perceive flex-basis correctly. Here is a simplest example illustrating how inputs do not obey and span outside of their parent block (see jsfiddle):
<div>
<input>
<input>
</div>
<style>
div { display: flex; width: 200px; border: 2px solid red; }
input { flex-basis: 50%; }
</style>
Here is another, more comprehensive, case.
What the hell? :)
The input elements has an instrinsic width - and width of flex items (along the flex axis) default to auto. Reset this using min-width: 0 - see demo below:
div {
display: flex;
width: 200px;
border: 2px solid red;
}
input {
flex-basis: 50%;
min-width: 0; /* ADDED */
}
<div>
<input>
<input>
</div>
Related
This question already has answers here:
Why is percentage height not working on my div? [duplicate]
(2 answers)
Closed 1 year ago.
For example, in the fiddle below, I have a single flex div.
It appears that setting the height to 100% has no effect on the div.
A div is display block by default and takes up 100% of the width. But obviously the height behaves differently.
https://jsfiddle.net/02wtuzjp/1/
#expand{
display: flex;
height: 100%;
border: 1px solid red;
}
<div id = 'expand'>
</div>
This appears to be expected behavior as there is not content in the div.
https://css-tricks.com/almanac/properties/h/height/
One solution is to use the units vh or more particularly 100vh.
I'm not sure it this is the proper or best way, however.
An element with a percentage based height, needs a parent reference for it to base its height on. You can add:
html, body {
height: 100%;
}
And your element will be 100% of the height:
html,
body {
height: 100%;
}
#expand {
display: flex;
height: 100%;
border: 1px solid red;
}
<div id="expand">
</div>
Per your edit:
You can certainly use 100vh to set the height, but then that element will always be 100 percent of the height of the viewport..no matter it's containing element.
For example:
#random {
height: 50px;
}
#expand {
display: flex;
height: 100vh;
border: 1px solid red;
}
<div id="random">
</div>
<div id="expand">
</div>
You can see that the height of your expand element is 100vh tall and creates a scroll because the height is the height of viewport, not the remaining space.
Resources:
Article on Medium
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
This question is about understanding how flex effect the display of child elements. The centering is peripheral and not the point of the question. Please see comments below if the question does not make sense.
From my reading of how flex works it should do the opposite and make the child elements behave like block elements.
However, in this minimal example it makes the paragraph element behave like an inline element.
I am using flex to center content.
<style>
/* display flex should cause child elments to behave like block elements
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#wrapper{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#image{
margin: 0px;
border: 1px dotted #888888;
}
#percentage{
margin: 0px;
font-size: 40px;
font-weight: bold;
border: 1px dotted #888888;
}
</style>
<div id="wrapper" >
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" alt="wikimedia" width="128" height="128">
<p id="percentage"> 10%</p>
</div>
Basically, flexbox has a default flex-direction of row that's why the elements are inline, to make them appear on like block elements you can set flex-direction to column.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I am trying to horizontally center one div inside parent div (Which is display flex in column mode) using margin 0 auto. When I do this the inner div is getting shrinked to the size of its content. Can someone explain why this is happening and how to fix this?
HTML
<div class="container">
<div class="mydiv">
CENTER THIS DIV
</div>
</div>
CSS
.container{
background-color: brown;
height: 100px;
display: flex;
flex-direction: column;
}
.mydiv{
background-color: chartreuse;
max-width: 500px;
margin: 0 auto;
}
If I remove flex from parent, then I am getting the correct output :
However, with the flex properties as in above code, this is what I get :
When you use display: flex; in a parent, the children automatically get the default flex values:
The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".
That's why your .mydiv adjusts to fit the text.
(more info: https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
If you don't want that to happen you could do something like this:
.container{
background-color: brown;
height: 100px;
display: flex;
flex-direction: column;
align-items: center; /* add this */
}
.mydiv{
background-color: chartreuse;
width: 100%; /* add this */
max-width: 500px; /* add this */
}
Working example:
https://codepen.io/sergiofruto/pen/dyMqbrm
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
How to use safe center with flexbox?
(3 answers)
Closed 5 years ago.
I have the following situation, the text get cuts off at the top when it not longer fits inside the container. What can I do to fix that? I'd still like the text to be centered if it's smaller than the container, and I can't change the container size.
div {
display: flex;
align-items: center;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
The problem here is caused by the fact that when using align-items (or justify-content) to center a flex row item, it will, by design, overflow at its top/bottom (or left/right).
To solve that a new keyword, safe, is introduced, though not many browsers support it yet.
How to use safe center with flexbox?
The other option is to use auto margin's, though with the given markup you can't, as the text doesn't have an inner wrapper (well, it has an anonymous one, though those we can't target with a CSS selector).
So by adding an inner wrapper (fiddle with wrapper) you can use auto margin's, and is well explained here:
Can't scroll to top of flex item that is overflowing container
But sometimes we just can't change the markup, and when, here is a little trick, using the pseudo elements, and use auto margin's on them.
To vertical center the text we also need the flex direction to be column so the pseudo is rendered above/below.
Stack snippet
div {
display: flex;
flex-direction: column; /* added */
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
border: 1px solid gray;
}
div::before, div::after {
content: '';
}
div::before {
margin-top: auto; /* added */
}
div::after {
margin-bottom: auto; /* added */
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
<div>
sdjhf
</div>
If you wrap the text into another tag, and set margin: auto 0; it seems to be working well.
div {
display: flex;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
background: pink;
margin-bottom: 20px;
}
span {
margin: auto 0;
}
<div>
<span>sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd</span>
</div>
<div>
<span>sdjhfkah</span>
</div>
This question already has answers here:
<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`
(4 answers)
Closed 5 years ago.
I need to have a scrollable div inside a fieldset. My problem is that a fieldset expands to it's contents width instead of staying withing its parent.
<div class="section">
<fieldset>
<div class="list">
</div>
</fieldset>
</div>
http://jsfiddle.net/UziTech/tg5uk25L/
The two boxes should both have scrollbars on the bottom but the top one is in a fieldset so it won't control the overflow.
How do I get the fieldset to only be as wide as it's parent?
Browsers have custom css in their default stylesheet for fieldset elements.
On Chrome it has min-width: -webkit-min-content;
You could just set this rule :
.section fieldset{
min-width: 0;
}
See fiddle:
http://jsfiddle.net/tg5uk25L/4/
Inspect the elements with Firebug, Chrome Dev Tools, aso to see the difference between the div and the fieldset elements in your stylesheet!
Just set overflow: scroll on the parent .section. That will contain the overflow and add scrollbars.
.section {
width: 100%;
border: 10px double;
box-sizing: border-box;
overflow: scroll; <----
}
FIDDLE
from your jsfiddle, perhaps you forget to add a fieldset to the second section
this is a quick fix
.section {
width: 100%;
border: 10px double;
box-sizing: border-box;
overflow-x: auto;
}
td {
padding: 0 100px;
border: 1px solid;
}
http://jsfiddle.net/oussamaelgoumri/meqvbjf1/