This question already has answers here:
Flexbox on IE11: image stretched for no reason?
(6 answers)
Closed 5 years ago.
I have a flexbox grid layout that has one tall image in one column and two shorter images stacked on top of each other in another column.
This is what it looks like it Chrome:
In Internet Explorer, the height of the two smaller nested images/divs get stretched to the first column's height.
How do I make the column with two nested images keep their own height?
h3 {
margin-bottom: 20px;
}
.grid {
box-sizing: border-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-left: -10px;
margin-right: -10px;
}
.col-4 {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
flex-basis: 33.33333%;
max-width: 33.33333%;
}
.executive-container {
max-width: 1440px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 5.21%;
padding-top: 80px;
padding-bottom: 0;
}
.executive-container .box {
margin-bottom: 20px;
-ms-flex-order: 1;
order: 1;
}
.executive-container .box .box-inner {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
}
.resimg {
width: 100%;
height: auto;
vertical-align: bottom;
}
.executive-container .box .board-member {
position: relative;
}
.executive-container .box .board-member .board-member-details {
width: 66%;
position: absolute;
bottom: 0;
left: 0;
color: red;
padding: 20px;
font-size: 1.8rem;
letter-spacing: 0;
font-weight: normal;
font-style: normal;
line-height: 2.9rem;
font-weight: 700;
line-height: 2.1rem;
letter-spacing: -0.02em;
}
<div class="grid executive-container">
<div class="box col-4 heading">
<h3>Executive<br>Leadership<br>Team</h3></div>
<div class="box col-12_sm-6_md-4">
<div class="board-member">
<div class="board-member-details">
<div class="board-name">Caption</div>
</div>
<img src="http://via.placeholder.com/821x1125" alt="" class="resimg portrait-desktop">
</div>
</div>
<div class="box col-4">
<div class="box-inner">
<div class="board-member">
<div class="board-member-details">
<div class="board-name">Caption</div>
</div><img src="http://via.placeholder.com/819x536" alt="" class="resimg"></div>
<div class="board-member">
<div class="board-member-details">
<div class="board-name">Caption</div>
</div><img src="http://via.placeholder.com/819x536" alt="" class="resimg"></div>
</div>
</div>
</div>
This helped! Flexbox on IE11: image stretched for no reason?
I set flex-shrink: 0 on the flex-child and it solved the problem in IE.
Related
Goal: I have a main flex box with row display. Within each of these flexbox I will have card with text inside. When I create the card inside the flexbox I place p tags inside the card with the text, but it does not reflect. I want the text to dsiplay within each card.
Code
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
line-height: 70vh;
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
Remove line-height: 70vh; property from the .flex-container>div
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
/*line-height: 70vh;*/
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
I'm trying to align the baselines of 2 different div. the First div contains an H1 text while the other contains an H4. I have a border at the bottom for reference point.
.row {
display: flex;
}
.col {
display: block;
margin-left: 20px;
margin-right: 20px;
}
<div class="row">
<div class="col">
<h1>Title/Header</h1>
</div>
<div class="col">
<h4>Subheader</h4>
</div>
</div>
Illustration
Use flex properties for this.
.row {
display: flex;
}
.col {
display: flex;
flex: 1;
margin-left: 20px;
margin-right: 20px;
height: 300px;
background: yellow;
flex-direction: column;
justify-content: flex-end;
}
h1, h4 {
margin: 0;
}
h4 {
text-align: right;
}
<div class="row">
<div class="col">
<h1>Title/Header</h1>
</div>
<div class="col">
<h4>Subheader</h4>
</div>
</div>
start with something like the code below. Margins and line height can change things. To make sure position absolute text does not go out of the parent box, you have to set that parent box to position relative
.row {
display: flex;
}
.col {
display: block;
margin-left: 20px;
margin-right: 20px;
height: 180px;
width: 180px;
background-color: yellow;
position: relative;
}
h1 {
display: inline-block;
position: absolute;
line-height: 20px;
bottom: 0px;
right: 0px;
margin: 0;
}
h4 {
display: inline-block;
position: absolute;
line-height: 10px;
bottom: 0px;
right: 0px;
margin: 0px;
}
<div class="row">
<div class="col">
<h1>Title/Header</h1>
</div>
<div class="col">
<h4>Subheader</h4>
</div>
</div>
I have a fixed-height interface I'm styling with CSS. I want it to be responsive to browser height (and, eventually, width... but one problem at a time) and I have a fiddle in which the interface operates almost exactly as I'd like it to with respect to browser height... with one exception.
I use a flexbox layout with object-fit: scale-down to force the row of images in the green div to shrink when their containing div is not tall enough to fit the images at native dimensions. This results in some "padding," the existence of which is perfectly well explained here. I've made the background color of the relevant div blue so that you can clearly see the visual space I'm talking about. I do not want this space to appear at all.
So, what is the proper way to make a row of images responsive in the way I'd like without introducing additional visual space between the images if object-fit cannot do this? Thank you for the input.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary">
<img src="https://via.placeholder.com/200">
<div class="mask">
<img src="https://via.placeholder.com/200/FF000">
</div>
</div>
<div class="flex-row">
<div class = "context">
<img src="https://via.placeholder.com/75x250">
</div>
<div class = "context">
<img src="https://via.placeholder.com/150x75">
</div>
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div>
</div>
</div>
</div>
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
When I use flex-flow: column wrap, the parent element's width is not stretched.
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
position: relative;
display: inline-block;
/* top:10px; */
/* left: 10px; */
padding: 20px;
}
.in{
display: flex;
align-items: center;
flex-flow: column wrap;
max-height: 300px;
align-content: flex-start;
justify-content: space-between;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item:last-child{
margin-left: 15px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
https://jsfiddle.net/p4oLk7dz/5/
So what should I do?
You are trying to have a flex container inside the oder one, the first one needs the display flex to get the content of the element below
I would also make some small changes but it really depends on what you are trying to achive.
If this isnt what you were looking for, please comment so i can try to improve it.
Hope this works :)
.box{
background: #f03;
position: relative;
display: flex;
max-width: 220px;
padding: 20px;
}
.in{
display: flex;
flex-wrap: wrap;
max-width: 220px;
}
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
position: relative;
display: flex;
max-width: 220px;
padding: 20px;
}
.in{
display: flex;
flex-wrap: wrap;
max-width: 220px;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item-2{
order: 3;
}
.item-3{
margin-left: 20px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
</div>
</body>
<!-- 第三个并没有把父元素宽度撑开 -->
Remove the display properties from this class
.box{
background: #f03;
display: inline-block;
display:relative;
/* top:10px; */
/* left: 10px; */
padding: 20px;
}
and everything works !!!
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
padding: 20px;
}
.in{
display: flex;
align-items: center;
flex-flow: column wrap;
max-height: 300px;
align-content: flex-start;
justify-content: space-between;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item:last-child{
margin-left: 15px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
you can check the result here https://jsfiddle.net/p4oLk7dz/30/
Above is a screenshot of how it looks on a 1920 width browser. This is essentially the layout I want, but when I resize the browser, it looks like this:
I would like the boxes to have no white spacing to the left and right of the individual sections and keep them all the same 100% width with/without the spacing.
I realize the spacing is occuring because of how the code is set up where the middle section has margin that pushes it away, but I'm not sure how to set this up to achieve both the first screenshot and this effect.
Fiddle: https://jsfiddle.net/jzhang172/r641pmzb/
body,
html {
margin: 0px;
font-family: lato-reg;
font-size: 16px;
color: #3c3c3c;
overflow-x: hidden;
}
img {
width: 100%;
height: 100%;
}
.section {
position: relative;
}
/*--------------------------------------Fifth Section--*/
.flex-container {
margin-top: 10px;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.work-indiv {
width: 540px;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
display: inline-block;
height: 237px;
position: relative;
margin-bottom: 10px;
cursor: pointer;
transition: 1s;
}
.work-indiv:hover img {
opacity: .6;
transition: .6s;
}
.middle {
padding-left: 10px;
padding-right: 10px;
width: 783px;
}
.work-indiv span {
position: absolute;
clear: both;
bottom: 0;
left: 0;
color: White;
margin-left: 40px;
text-transform: uppercase;
margin-bottom: 40px;
font-size: 2.125em;
font-family: latobold;
letter-spacing: .16em;
}
.middle span {
margin-left: 50px;
}
<div class="section" id="fifth">
<div class="flex-container">
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Topworkz">
<span>Topworkz</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Joint">
<span>Joint</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Market">
<span>Market</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Worktop">
<span>Worktop</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Lable">
<span>Lable</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="KYIV">
<span>KYIV</span>
</div>
</div>
Try removing the left and right padding on .middle in a media query for smaller screen sizes.
You have this in your code:
.middle {
padding-left: 10px;
padding-right: 10px;
width: 783px;
}
Try this adjustment:
#media screen and ( max-width: 1200px) {
.middle {
padding-left: 0;
padding-right: 0; }
}
Now, when the screen size is less than 1200px wide, the padding is removed.
Revised Demo
Change the padding of the elements to be always 5px.
Now, the separation between them is 10px, that is what you want.
To make the padding on the left most elements appear to be zero again, set a negative margin of -5px on the flex container. This will make the illusion that the elements are alligned perfectly
body,
html {
margin: 0px;
font-family: lato-reg;
font-size: 16px;
color: #3c3c3c;
overflow-x: hidden;
}
img {
width: 100%;
height: 100%;
}
.section {
position: relative;
}
/*--------------------------------------Fifth Section--*/
.flex-container {
margin-top: 10px;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-left: -5px;
margin-right: -5px;
}
.work-indiv {
width: 540px;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
display: inline-block;
height: 237px;
position: relative;
margin-bottom: 10px;
cursor: pointer;
transition: 1s;
padding-left: 5px;
padding-right: 5px;
}
.work-indiv:hover img {
opacity: .6;
transition: .6s;
}
.middle {
width: 783px;
}
.work-indiv span {
position: absolute;
clear: both;
bottom: 0;
left: 0;
color: White;
margin-left: 40px;
text-transform: uppercase;
margin-bottom: 40px;
font-size: 2.125em;
font-family: latobold;
letter-spacing: .16em;
}
.middle span {
margin-left: 50px;
}
<div class="section" id="fifth">
<div class="flex-container">
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Topworkz">
<span>Topworkz</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Joint">
<span>Joint</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Market">
<span>Market</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Worktop">
<span>Worktop</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Lable">
<span>Lable</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="KYIV">
<span>KYIV</span>
</div>
</div>