html - css, height of nested flexbox not correct in Chrome -


i have tried create basic layout using nested flex boxes. layout looks fine in ie 11, height of nested flex box not being set in chrome.

i have example here http://jsfiddle.net/jkristia/bl4pyg4b/3/

what missing working on chrome ?

<div>     <!-- header outside flex box -->     <header class="titlebar">         <div class="left">this left box</div>         <div class="center">this text centered in middle box</div>         <div class="right">right box</div>     </header>     <!-- flex box -->     <section class="flexcontainer">         <!-- row using inner flex box -->         <div class="flexrow">             <div class="flexcontainer02">                 <div class="left">left</div>                 <div class="center">                     <div class="flexcontainer03">                         <div class="top">center of div.                             <br />top</div>                         <div class="bottom">bottom</div>                     </div>                 </div>                 <div class="right">right</div>             </div>         </div>         <div class="footer">row 3, footer</div>     </section> </div>

and css

html, body {     background-color: wheat;     width: 100%;     height: 100%;     padding: 0;     margin: 0; } .titlebar {     height: 40px;     background-color: #ec7fed;     display: flex;     flex-direction: row; } .titlebar .left {     border: dashed;     border-color: white;     border-width: 1px;     background-color: #78c6f3;     /*          below vertically center text.         set line height height of parent element - padding     */     line-height: calc(40px - (5px + 5px));     padding: 5px;     margin-left: 10px;     margin-right: 10px; } .titlebar .center {     background-color: lightgreen;     text-align: center;     /* flexgrow allows box take remaining space in flax container*/     flex-grow: 1; } .titlebar .right {     background-color: lightblue;     margin: 10px; } .flexcontainer {     position: absolute;     width: 100%;     height: calc(100% - 40px);     flex-basis: calc(100% - 40px);         background-color: #d58d28;     flex-direction: column;     display: flex; } .flexrow {     margin:5px;     flex: 1 100%;     border: dashed;     border-color: white;     border-width: 1px;     background-color: lightcoral; } .flexcontainer02 {     margin: 5px;     flex-direction: row;     background-color: lightgray;     display: flex;     width: calc(100% - 10px);     height:calc(100% - 10px);     flex-basis: 100%; } /* apply following immediate children of flexcontainer02*/  .flexcontainer02 > * {     margin: 4px;     text-align: center;     border: dashed;     border-color: white;     border-width:1px; } .flexcontainer02 .left {     flex: 0 200px;     background-color: #78c6f3; } .flexcontainer02 .center {     flex: 1 200px;     background-color: #78c6f3; } .flexcontainer02 .right {     flex: 0 100px;     background-color: #9fe1fa } /* apply following immediate children of flexcontainer03*/  .flexcontainer03 {     width: 100%;     height: 100%;     flex-direction: column;     display: flex;     background-color: #86dcc2; } .flexcontainer03 > * {     margin: 4px;     text-align: center;     border: solid;     border-color: darkgrey;     border-width:1px; } .flexcontainer03 .top {     flex: 0 50px;     background-color: #00ff90;     overflow:hidden; } .flexcontainer03 .bottom {     flex: 1;     background-color: #cbcc80; } .footer {     background-color: #cbce83;     border: solid;     font-size:12px;     text-align:right;     border-color: darkgray;     border-width: 1px;     margin: 0px;     padding: 0px;     /* static height set both grow , shrink */     flex-grow: 0;     flex-shrink: 0;     height:30px; }

a colleague found solution in codepen http://codepen.io/josephsilber/pen/hqgaz

the problem had 'div' each sub container. solution mark flex item new container setting display: flex.

i have fixed jsfiddler example http://jsfiddle.net/jkristia/bl4pyg4b/4/

html, body {  	background-color: wheat;  	width: 100%;  	height: 100%;  	padding: 0;  	margin: 0;  }    .titlebar {  	height: 40px;  	background-color: #ec7fed;  	display: flex;  	flex-direction: row;  }    	.titlebar .left {  		border: dashed;  		border-color: white;  		border-width: 1px;  		background-color: #78c6f3;  		/*   		below vertically center text.  		set line height height of parent element - padding  	*/  		line-height: calc(40px - (5px + 5px));  		padding: 5px;  		margin-left: 10px;  		margin-right: 10px;  	}    	.titlebar .center {  		background-color: lightgreen;  		text-align: center;  		/* flexgrow allows box take remaining space in flax container*/  		flex-grow: 1;  	}    	.titlebar .right {  		background-color: lightblue;  		margin: 10px;  	}    .flexcontainer {  	position: absolute;  	width: 100%;  	height: calc(100% - 40px);  	background-color: #d58d28;  	flex-direction: column;  	display: flex;  }    .flexrow {  	flex: 1;      display: flex;      margin: 5px;  	flex-direction: row;  	background-color: lightgray;  	width: calc(100% - 10px);  	height: calc(100% - 10px);    	margin:5px;  	border: dashed;  	border-color: white;  	border-width: 1px;  }    /* apply following immediate children of .flexrow*/  .flexrow > * {  	margin: 4px;  	text-align: center;  	border: dashed;  	border-color: white;  	border-width:1px;  }  .left {  	flex: 0 200px;  	background-color: #78c6f3;  }  .center {      flex: 1;      display: flex;    	width: 100%;  	flex-direction: column;  	background-color: #86dcc2;  }  .right {  	flex: 0 100px;  	background-color: #9fe1fa  }    .center > * {  	margin: 4px;  	text-align: center;  	border: solid;  	border-color: darkgrey;  	border-width: 1px;  }  .center-top {  	flex: 0 40px;  	flex-grow: 0;  	flex-shrink: 0;  	background-color: #00ff90;  	overflow:hidden;  }  .center-bottom {  	flex-grow: 1;  	flex-shrink: 1;  	background-color: #cbcc80;      overflow: auto;  	display: flex;  }    .footer {  	background-color: #cbce83;  	border: solid;  	font-size:12px;  	text-align:right;  	border-color: darkgray;  	border-width: 1px;  	margin: 0px;  	padding: 0px;  	/* static height set both grow , shrink */  	flex-grow: 0;  	flex-shrink: 0;  	height:30px;  }
<div>    <!-- header outside flex box -->    <header class="titlebar">      <div class="left">        left box      </div>      <div class="center">        text centered in middle box      </div>      <div class="right">        right box      </div>    </header>    <!-- flex box -->    <section class="flexcontainer">        <!-- row using inner flex box -->      <div class="flexrow">        <div class="left">          left        </div>        <div class="center">          <div class="center-top">            center of div.            <br />top          </div>          <div class="center-bottom">            bottom          </div>        </div>        <div class="right">          right        </div>      </div>        <div class="footer">        row 3, footer      </div>      </section>      </div>


Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more