I'm trying to create a "simple" information bar that should be displayed inline.
The bar consist of two divs, where the first contains all the required info (and is always visible) and the second shows information messages when they apply.
I have created a pen to demonstrate here.
My problem is that the content of the upper div is not always the same width and in some cases it overflows (which is a valid behavior based on my requirements since I always want it to be in one line). Thus when the screen gets shrinked enough the upper div overflows but the below keeps a width same as the screen width and does not follow the upper div's width.
What I want to achieve is make the below div have the same width as the upper even when the upper one overflows. Any ideas anyone?
Adding code here as well for reference:
HTML:
<h2> Shrink me to see than warning div is not the same width as the other one</h2>
<div id="TaskTimeBar">
<div id='main-wrapper'>
<div class="task-time-bar-content">
<div id="time-cell">
<div class='time-container'>
<i class="fa fa-clock-o"></i>21:12
</div>
</div>
<div id="active-task-bar-main-content">
<div><i class="fa fa-link"></i> #28125</div>
<div><i class="fa fa-info"></i> This can be a long text...</div>
<div><i class="fa fa-user"></i> Yo mama</div>
</div>
<div id="active-task-bar-buttons">
<div class="active-bar-button-wrapper">
<button>Stop</button>
</div>
<div class="active-bar-button-wrapper">
<button>Switch To #28192</button>
</div>
</div>
</div>
</div>
<div class="active-task-bar-information">This is an information message</div>
</div>
CSS:
#TaskTimeBar {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#main-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.task-time-bar-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 5px;
}
#time-cell {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: bold;
font-size: 22px;
}
.time-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.time-container i {
padding-right: 5px;
}
#active-task-bar-main-content {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: space-around;
-ms-flex-pack: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
}
#active-task-bar-main-content div {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
#active-task-bar-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 10px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
justify-content: flex-end;
}
.active-bar-button-wrapper {
line-height: 28px;
margin-right: 5px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.active-task-bar-information {
background-color: #ffa500;
color: #f3ebf8;
border: thin solid #808080;
border-top: none;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
Edit:
Let me explain a little bit more based on the div's ids as asked in the comments.
I hava a #TaskTimeBar that contains two divs inside, #main-wrapper and #active-task-bar-information. Requirements are as follows:
#main-wrapper should always be in one line
#active-task-bar-information should always have the same width as #main-wrapper and be underneath it.
The problem is that when the screen becomes small the contents of #main-wrapper overflow and exceed the screen width but #active-task-bar-information does not follow. If you play around with the window width in the linked pen you will see the effect.
Just to make sure I got this right:
main-wrapper never actually wraps it's content, therefore it overflows.
active-task-bar-information content actually wraps and never exceeds the viewport.
main-wrapper's behavior is correct.
active-task-bar-information's behavior is not correct. It should behave as it's sibling #main-wrapper.
Going by these criterions I think I got it. Try this:
html { box-sizing: border-box; font: 16px/1.5 Consolas; }
body { width: 100%; min-width: 60em; height: auto; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
#TaskTimeBar {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
-webkit-justify-content: stretch;
-moz-justify-content: stretch;
justify-content: stretch;
}
#main-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.task-time-bar-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 5px;
}
#time-cell {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: bold;
font-size: 22px;
}
.time-container {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.time-container i {
padding-right: 5px;
}
#active-task-bar-main-content {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: space-around;
-ms-flex-pack: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
}
#active-task-bar-main-content div {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
#active-task-bar-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 10px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
justify-content: flex-end;
}
.active-bar-button-wrapper {
line-height: 28px;
margin-right: 5px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.active-task-bar-information {
background-color: #ffa500;
color: #f3ebf8;
border: thin solid #808080;
border-top: none;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
To get more accurate results I reset everything to border-box sizing, zeroed all margins, paddings, and borders. That's optional.
I changed how the parent flexbox (TaskTimeBar) contents are kept since main-wrapper and active-task-bar-information are siblings. The changes are as follows:
#TaskTimeBar {...
.....
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
-webkit-justify-content: stretch;
-moz-justify-content: stretch;
justify-content: stretch;
}
TaskTimeBar (the parent) stretches it's children (main-wrapper and active-task-bar-information), past the viewport due to the justify property stretch and the flex-wrap property nowrap. As a side note, active-task-bar-information was always 2px shorter than main-wrapper until I did that reset and now they measure the same width in any sized viewport (as far as I'm able to determine).
Hopefully I understood your question properly and gave you appropriate advice.
EDIT: While I was fulfilling a request for a [demo][1], I added inline-flex to all three divs. Details are provided with the demo. Below are screenshots illustrating the 2 divs equal widths.
In this fiddle I've taken #zer00ne's code, and tried to simplify the situation, by keeping only the outer div a flex-box, instead of managing a hierarchy of flex-boxes. I've kept the inner divs in line with display: inline and white-space: nowrap. Is seems to achieve the desired result.
Related
I need help in writing a css fix for aligning the logo and navbar in desktop and mobile responsive modes. No options available in customize menu. Thanks in advance.
My Site
Theme Used
Problem SS1
Problem SS2
Use can use Display flex CSS. Example your website:
<div id="header-text-nav-wrap">
<div id="header-left-section">
<!-- your logo here -->
</div>
<div id="header-right-section">
<!-- your menu -->
<!-- your searh and other -->
</div>
</div>
<style>
#header-text-nav-wrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#header-logo-image img{
max-height: 60px;
width: auto;
margin: 0 auto;
text-align: center
}
#header-right-section{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main-navigation,
.header-action{
padding-top: 0;
}
#media (max-width: 768px) {
.better-responsive-menu #header-text-nav-wrap{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.better-responsive-menu #header-logo-image {
float: none;
margin-bottom: 0;
margin-right: 0;
text-align: center;
}
.better-responsive-menu #header-right-section {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#header-right-section .header-action{
min-width: 200px;
padding-right: 15px;
}
}
</style>
Aside is used for a complete section left in a webside.
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
color: #00374b;
font-family: Verdana, sans-serif;
font-size: 0.9em;
background-color: #FFFFFF;
}
/*First big flexbox container that places the elements from top to down (column)*/
.flex_container {
width: 100%;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/*Second big flexbox container for the ASP form from left (aside) to right (main section) (row)*/
.layout_main {
flex: 1 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-flow: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.layout_aside {
flex: 1 auto;
background-color: #004664;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
padding: 10px;
}
.element {
flex: 1 auto;
}
.layout_main_content {
flex: 1 1 90%;
min-width: 500px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
article{
flex: 1 auto;
}
<body class="flex_container">
<div class="layout_main">
<aside class="layout_aside" id="aside_menu" runat="server">
<div class="element">Test 1</div>
<div class="element">Test 2</div>
<div class="element">Test 3</div>
</aside>
<div class="layout_main_content">
<article>Article1</article>
<article>Article2</article>
</div>
</div>
</body>
For this code the flexbox definition is not working for aside. If I remove the runat="server" the flexbox is again recognized.
Any suggestion or resolution. I tried to put the runat server to a different div but this doesn´t help.
I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.
This is my html:
<div class="flex-container">
<div class="flex-row">
<h1 class="brandname">Hello</h1>
</div>
<div class="flex-row">
<form>
<!-- <div class="search centered"> -->
<div class="search">
<div class="input-container">
<input type="text" name="query" class="searchbar" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
</div>
and this is my css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.flex-container{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
form{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
.search{
display: flex;
display: -webkit-flex;
flex: 0 1 455px;
-webkit-flex: 0 1 455px;
}
.input-container{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.searchbar{
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
/*float: left;*/
/*display: block;*/
flex: 1;
-webkit-flex: 1;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
border-radius: 0px;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
outline-style: none;
border-width: 0px;
}
and it works in chrome, ie edge and in this fiddle, but not in safari.
In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.
any ideas on how to make this work in safari?
One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.
I changed .flex-row css rules to:
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 0 1 100%;
}
and changed the flex-row first child css rules to:
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 auto;
}
and then it works.
I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy
Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
similar for all other rules.
I have a containing <ul> that is display: flex horizontal. Each <li> is 25% width and also display: flex to get them all equal heights.
Each <li> contains an anchor that is display: flex column, to align the elements within correctly, including the main image container and image. In every browser, including IE10 this is absolutely fine, no issues. However, in IE11 this is where the problems start.
IE11 calculates the image container height as the actual height of the source image, and not the height of the image when rendered. This ends up rendering the <li> much, much taller than it should be.
How the layout looks in every self-respecting browser:
How the layout looks in IE11:
Check out the live example
I know this could be solved by explicitly defining the image height, but I don't want to do that. I could also solve it with JS, but again, I shouldn't have to. Am I missing something with this, as it doesn't appear to be listed on Flexbugs.
* {
box-sizing: border-box;
}
img {
display: block;
width: 100%;
}
.promotions-list {
background-color: #eaeaea;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: .5rem 1rem;
width: 960px;
}
.promotions-list__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1rem;
width: 25%;
}
.promotions-list__link {
background-color: white;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
padding: 1em;
position: relative;
width: 100%;
}
.promotions-list .image-container {
display: block;
height: auto;
}
.promotions-list .image-container img {
display: block;
margin: 0 auto;
max-width: 40%;
}
<ul class="promotions-list">
<li class="promotions-list__item has-image">
<a href="/promotion/358/the-new-l5000-mono-laser-range-from-brother" class="promotions-list__link" title="Link to The NEW L5000 Mono Laser Range from Brother details">
<span class="promotions-list__item__header">
<span class="image-container">
<img src="//cdn.2020prosoftware.com/installations/1/promotions/358/original/NewModel2016.png">
</span>
<span class="list__item__title">The NEW L5000 Mono Laser Range from Brother</span>
</span>
<span class="promotions-list__item__body">
<span class="description">The NEW standard in reliability! Introducing new, improved printers from Brother, the market leader…</span>
</span>
</a>
</li>
</ul>
This appears to be fixed by setting flex: 0 0 auto on .promotions-list__item__header.
* {
box-sizing: border-box;
}
img {
display: block;
width: 100%;
}
.promotions-list {
background-color: #eaeaea;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: .5rem 1rem;
width: 960px;
}
.promotions-list__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1rem;
width: 25%;
}
.promotions-list__link {
background-color: white;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
padding: 1em;
position: relative;
width: 100%;
}
.promotions-list .image-container {
display: block;
height: auto;
}
.promotions-list .image-container img {
display: block;
margin: 0 auto;
max-width: 40%;
}
/* Added */
.promotions-list__item__header {
flex: 0 0 auto;
}
<ul class="promotions-list">
<li class="promotions-list__item has-image">
<a href="/promotion/358/the-new-l5000-mono-laser-range-from-brother" class="promotions-list__link" title="Link to The NEW L5000 Mono Laser Range from Brother details">
<span class="promotions-list__item__header">
<span class="image-container">
<img src="//cdn.2020prosoftware.com/installations/1/promotions/358/original/NewModel2016.png">
</span>
<span class="list__item__title">The NEW L5000 Mono Laser Range from Brother</span>
</span>
<span class="promotions-list__item__body">
<span class="description">The NEW standard in reliability! Introducing new, improved printers from Brother, the market leader…</span>
</span>
</a>
</li>
</ul>
Using this example, http://www.bootply.com/126437/, I am trying to make my Bootstrap layout columns equal height, as well as still be fully responsive.
I am trying to get my head around how the CSS is working in the example but still haven't cracked it. With my own SASS, the layout looks fine on a large screen, but until I add "auto" to my flex, the columns aren't responsive on a small screen.
Any help would be appreciate to get this working on all size screens!
HAML/Bootstrap:
%section.row.row-flex.row-flex-wrap
.col-xs-12.col-sm-12.col-md-8.col-lg-8.column-flex
.flex-col
= field('block_2')
.col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
.row
.col-xs-12.col-sm-6.col-md-12.col-lg-12
.events-image-block
= field('block_3')
.col-xs-12.col-sm-6.col-md-12.col-lg-12
= field('block_4')
%section.row.row-flex.row-flex-wrap
.col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
.flex-col
= field('block_5')
.col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
.flex-col
= field('block_6')
.col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
.flex-col
= field('block_7')
SASS:
section.row-flex {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-box;
display: flex;
webkit-flex: 1;
-ms-flex: 1;
flex: 1;
&.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
webkit-flex: 0;
-ms-flex: 0;
flex: 0;
}
& > .column-flex {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-box;
display: flex;
margin: -.2px;
&.one-column {
webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
.flex-col,
.flex-col > div {
flex-flow: column nowrap;
display: -webkit-flex;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
}