Flex box issues with chrome

amir_arabnezhad · July 24, 2016, 10:19am

i have an issue with the height of the flex item in chrome. please see these two pictures :

this is how it looks in chrome:

in the firefox version:

absolutely the firefox version is good but in the chrome, the main section’s height (the left section) sets in related to the sidebar’s heights.

how can i fix this to have the same design as firefox?

TechnoBear · July 24, 2016, 10:41am

Welcome to the forums, @amir_arabnezhad.

It’s very hard to diagnose a problem from an image, so please help us to help you by posting both the HTML and CSS code you’re using, or a link to a live page.

To post code on the forums, you need to format it. You can highlight your code, then use the </> button in the editor window, which will format it,or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

PaulOB · July 24, 2016, 11:58am

That looks as though you have set a fixed height in there somewhere but as Technobear said above we will need to see your code as there is obviously some conflict in the code you are using.

amir_arabnezhad · July 24, 2016, 4:00pm

since 'm working on local, i cant give you the live version. and here is the files you need in the right structure: https://1fichier.com/?x3d4wyblhq

thank you for your time and help.

PaulOB · July 24, 2016, 7:52pm

Hi,

You are using flexbox on nearly everything (including the body) and is pretty much overkill. However the problem is that you are using the most advanced CSS on the most out of date a page.

There is no doctype on your page so you switch into quirks mode and flexbox suffers as a result.

Add a doctype to the top of the page:

<!DOCTYPE HTML>

I believe that will fix your issues.

As an aside note that In future it would have been better if you had constructed the page from your files and pasted them in a working manner like this:

<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style>
* {
	direction: rtl
}
@font-face {
	src: url("fonts/sans.woff");
	font-family: "sans"
}
a {
	text-decoration: none;
	color: inherit
}
a:visited {
	color: inherit
}
i {
	color: #F7F8DE
}
a, h1, h2, h3, h4, h5, h6, li, p, span {
	font-family: "sans", tahoma;
	color: #757D75
}
h1 {
	font-size: 2.3em
}
h2 {
	font-size: 2em
}
h3 {
	font-size: 1.8em
}
h4 {
	font-size: 1.6em
}
h5 {
	font-size: 1.4em
}
h6 {
	font-size: 1.2em
}
body {
	background: url("../images/main-bg.jpg") no-repeat center center;
	background-size: cover;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column
}
input[type="checkbox"] {
	border-radius: 3px;
	border-color: #F7F8DE;
	width: 50px !important
}
table {
	border-collapse: collapse;
	font-family: "sans", tahoma;
	line-height: 2;
	color: white
}
table td, table th {
	box-shadow: inset 0 -1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(0, 0, 0, 0.25)
}
table th {
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	padding: 1em;
	color: rgba(0, 0, 0, 0.45);
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
	font-size: 1em
}
table td {
	color: #f7f7f7;
	padding: 0.7em 1em 0.7em 1.15em;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
	font-size: 0.8em
}
table td div {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	justify-content: center
}
table tr {
	-webkit-transition: background 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, box-shadow 0.3s;
	transition: background 0.3s, box-shadow 0.3s
}
table tr:hover {
	background: rgba(0, 0, 0, 0.1)
}
.next {
	transition: background-color 0.3s;
	padding-right: 2%;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	margin-left: 35%;
	background-color: #9b59b6;
	align-items: center
}
.next:hover {
	cursor: pointer
}
.next input {
	border: none;
	background: none;
	color: #F7F8DE;
	font-family: "sans", tahoma
}
.previous {
	transition: background-color 0.3s;
	padding-left: 2%;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	direction: ltr;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	background-color: #8e44ad;
	align-items: center
}
.previous:hover {
	cursor: pointer
}
.previous input {
	border: none;
	background: none;
	color: #F7F8DE;
	font-family: "sans", tahoma
}
input[type=checkbox]:not(old), input[type=radio]:not(old) {
	display: none
}
input[type=checkbox]:not(old)+label, input[type=radio]:not(old)+label {
	display: inline-block;
	text-align: center
}
input[type=checkbox]:not(old)+label>span, input[type=radio]:not(old)+label>span {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	background: white;
	background-image: -moz-linear-gradient(#f0f0f0, #e0e0e0);
	background-image: -ms-linear-gradient(#f0f0f0, #e0e0e0);
	background-image: -o-linear-gradient(#f0f0f0, #e0e0e0);
	background-image: -webkit-linear-gradient(#f0f0f0, #e0e0e0);
	background-image: linear-gradient(#f0f0f0, #e0e0e0);
	vertical-align: bottom
}
input[type=checkbox]:not(old):checked+label>span, input[type=radio]:not(old):checked+label>span {
	background-image: -moz-linear-gradient(#e0e0e0, #f0f0f0);
	background-image: -ms-linear-gradient(#e0e0e0, #f0f0f0);
	background-image: -o-linear-gradient(#e0e0e0, #f0f0f0);
	background-image: -webkit-linear-gradient(#e0e0e0, #f0f0f0);
	background-image: linear-gradient(#e0e0e0, #f0f0f0)
}
input[type=checkbox]:not(old):checked+label>span:before {
	content: '✓';
	width: 1em;
	color: #f1c40f;
	font-size: 1.5em;
	line-height: 1em;
	font-weight: bold;
	text-align: center
}
#cpPage {
	padding: 50px;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	align-items: center
}
#cpPage .note {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 7px 20px;
	margin-bottom: 50px;
	background-color: #4DAF7C
}
#cpPage .note i {
	color: #F7F8DE
}
#cpPage .note span {
	color: #F7F8DE;
	margin-right: 15px
}
#cpPage .completeProfile form {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column
}
#cpPage .completeProfile form select[name="department"] {
	overflow: scroll;
	flex-basis: 40px;
	padding: 5px 15px;
	margin-bottom: 15px;
	border: 1px solid #C0C0C0;
	font-family: "sans", tahoma;
	color: #757D75
}
#cpPage .completeProfile form input {
	flex-basis: 40px;
	padding: 5px 15px;
	margin-bottom: 15px;
	border: 1px solid #C0C0C0;
	font-family: "sans", tahoma;
	transition: border-color 0.2s
}
#cpPage .completeProfile form input:focus {
	border-color: #26A65B
}
#cpPage .completeProfile form input[type="submit"] {
	background-color: #264348;
	color: #F7F8DE;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s
}
#cpPage .completeProfile form input[type="submit"]:hover {
	background-color: #049372;
	color: #F7F8DE
}
#dashboard {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	padding: 30px;
	box-sizing: border-box
}
#dashboard #sidebar {
	padding: 20px;
	box-sizing: border-box;
	background-color: #34495e;
	color: #F7F8DE;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	flex-basis: content;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column
}
#dashboard #sidebar .sidebarHeader {
	align-items: center;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #bdc3c7;
	padding-bottom: 10px
}
#dashboard #sidebar .sidebarHeader figure {
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3;
	border: 3px solid #bdc3c7
}
#dashboard #sidebar .sidebarHeader h4 {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	color: #F7F8DE;
	font-size: 1em;
	text-align: center
}
#dashboard #sidebar .sidebarContent ul {
	list-style: none;
	padding-right: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}
#dashboard #sidebar .sidebarContent ul li {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	transition: background-color 0.3s;
	margin-bottom: 15px;
	padding: 2px 5px
}
#dashboard #sidebar .sidebarContent ul li:hover {
	background-color: rgba(255, 255, 255, 0.3)
}
#dashboard #sidebar .sidebarContent a {
	color: #F7F8DE;
	font-size: 0.9em;
	margin-right: 7px
}
#dashboard #sidebar .sidebarContent i {
	color: #F7F8DE;
	border-left: 1px solid #bdc3c7;
	padding-left: 6px
}
#dashboard #sidebar .sidebarFooter {
	border-top: 1px solid #bdc3c7;
	padding-top: 15px;
	text-align: center
}
#dashboard #sidebar .sidebarFooter a {
	color: #F7F8DE;
	font-family: tahoma;
	font-size: 12px
}
#dashboard #body {
	background-color: #FBFBFB;
	border: 1px solid #757D75;
	margin-right: 5%;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3
}
#dashboard #body #modules {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 60px;
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3
}
#dashboard #body #modules #firstStep {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column
}
#dashboard #body #modules .note {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 25px;
	margin-bottom: 30px;
	background-color: #27ae60
}
#dashboard #body #modules .note span {
	font: 13px/2.2 "sans", tahoma;
	color: #F7F8DE;
	margin-right: 1%
}
#dashboard #body #modules .note span {
	flex: 17
}
#dashboard #body #modules .note i {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1
}
#dashboard #body #modules .department {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3
}
#dashboard #body #modules .department span {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	font: bold 12px "sans", tahoma;
	flex: 0.5;
	margin: 20px auto
}
#dashboard #body #modules .department .step1Form {
	flex: 3;
	width: 100%;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	align-items: center
}
#dashboard #body #modules .department .step1Form select {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	border: 1px solid 1px solid #95A5A6;
	width: 40%
}
#dashboard #body #modules .department .step1Form select option {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	font: 12px/20px "sans", tahoma;
	color: #757D75
}
#dashboard #body #modules .department .step1Form select option:checked, #dashboard #body #modules .department .step1Form select option:hover {
	background-color: #16A085 !important;
	color: #F7F8DE
}
#dashboard #body #modules .department .step1Form input[type="submit"] {
	margin-top: 20px;
	background-color: #16A085;
	font: 14px "sans";
	color: #F7F8DE;
	flex-basis: 40px;
	padding: 5px 15px;
	margin-bottom: 15px;
	border: 1px solid #C0C0C0;
	transition: background-color 0.3s
}
#dashboard #body #modules .department .step1Form input[type="submit"]:hover {
	cursor: pointer
}
#dashboard #body footer {
	background-color: #5D8CAE;
	font: 13px tahoma;
	padding: 10px 30px;
	box-sizing: border-box;
	width: 100%;
	flex: 0.3;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row
}
#dashboard #body footer .copyright {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	color: #F7F8DE
}
#dashboard #body footer .version {
	color: #F7F8DE;
	flex: 0.2
}
#dashboard #step2 {
	flex: 1;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: column
}
#dashboard #step2 .note {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 25px;
	margin-bottom: 30px;
	background-color: #0eac51
}
#dashboard #step2 .note span {
	font: 13px/2.2 "sans", tahoma;
	color: #F7F8DE;
	margin-right: 1%
}
#dashboard #step2 table {
	background-color: #336ca6
}
#dashboard #step2 #navigation {
	display: -webkit-flex;
	display: -ms-flex;
	display: -webkit-box;
	display: flex;
	flex-direction: row;
	margin-top: 3%
}
body {
	background: none;
	background-color:  #EEEEEE;
}
</style>
</head>
<body>
<div id="dashboard">
  <div id="sidebar">
    <div class="sidebarHeader">
      <figure> عکس </figure>
      <h4> heading</h4>
    </div>
    <div class="sidebarContent">
      <ul>
        <li> <i class="fa fa-key"> </i> <a href="#"> تغییر رمز عبور </a> </li>
        <li> <i class="fa fa-question-circle-o"> </i> <a href="#"> راهنمای کار با سایت </a> </li>
        <li> <i class="fa fa-smile-o"> </i> <a href="#"> معرفی به دوستان </a> </li>
        <li> <i class="fa fa-sign-out"> </i> <a href="#"> خروج </a> </li>
      </ul>
    </div>
    <div class="sidebarFooter"> <a href="#"> درباره سازندگان </a> </div>
  </div>
  <div id="body">
    <div id="modules">
      <div id="firstStep">
        <div class="note"> <i class="fa fa-exclamation-circle fa-2x"></i> <span> اطلاعات زیر را وارد کنید و مرحله به مرحله پیش بروید. در پایان یک برنامه ی پیشنهادی برای ترم پیش رو خواهید داشت.
          در حال حاضر این برنامه برای دانشگاه صنعتی شاهرود و ترم نخست 95-96 در دسترس میباشد. </span> </div>
        <div class="department"> <span> دانشکده هایی که مایل به انتخاب دروس از آنها هستید را انتخاب کنید: </span>
          <form action="#" method="post" class="step1Form">
            <select multiple>
              <option value="computer"> مهندسی کامپیوتر و فناوری اطلاعات </option>
              <option value="electric"> مهندسی برق </option>
              <option value="mechanic"> مهندسی مکانیک </option>
              <option value="chemistry"> مهندسی شیمی </option>
              <option value="civil"> مهندسی عمران </option>
              <option value="mathematic"> علوم ریاضی </option>
              <option value="architecture"> مهندسی معماری </option>
            </select>
            <input type="submit" value="بزن بریم!" class="step1Button">
          </form>
        </div>
      </div>
      <div id="step2">
        <div class="note"> <i class="fa fa-book fa-2x"> </i> <span> در لیست زیر درسهای ارائه شده ی دانشکده ی های انتخاب شده وجود دارد، درسهای موردنظرتان را انتخاب کنید. </span> </div>
        <form action="#" method="post">
          <table class="step2Table">
            <tr>
              <th> انتخاب </th>
              <th> نام درس </th>
              <th> دانشکده </th>
            </tr>
            <tr>
              <td><div>
                  <input type="checkbox" id="flatCheckBox">
                  <label for="flatCheckBox"><span><span></span></span></label>
                </div></td>
              <td> برنامه نویسی </td>
              <td> کامپیوتر و فناوری اطلاعات </td>
            </tr>
          </table>
          <div id="navigation">
            <div class="next"> <i class="fa fa-arrow-right"> </i>
              <input type="submit" value="مرحله بعدی">
            </div>
            <div class="previous"> <i class="fa fa-arrow-left"></i>
              <input type="button" name="#" value="مرحله قبلی">
            </div>
          </div>
        </form>
      </div>
    </div>
    <footer>
      <div class="copyright" > &copy طراحی و توسعه از فلان تیم </div>
      <div class="version"> برنامه فلان، نسخه 0.1 </div>
    </footer>
  </div>
</div>
</body>

As it was I had to spend 15 minutes downloading, concatenating and constructing the page before I could test if my guess was right

amir_arabnezhad · July 24, 2016, 8:40pm

thank you for your helpful answer and i’m sorry if i put you in trouble.
the thing is i’m newbie in design and i’m wondering where i should use flexbox? and is it better to use it instead of float-clear design ?

and i didn’t get this : However the problem is that you are using the most advanced CSS on the most out of date a page.

PaulOB · July 24, 2016, 9:10pm

I simply meant that you didn’t have a doctype. When you don’t have a doctype browsers revert to old fashioned quirks mode rather than standards mode.

The answer is you should use it where it is needed.

If your design needs what flexbox offers then use it. It’s great for equal columns but then so is display:table / table-cell which works all the way back to IE8. Try to keep things simple but if your design needs to flex then use it.

I would avoid floated columns these days as they are not needed and restrict floating to where you want elements to wrap around a floated object.

system · October 24, 2016, 4:11am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
How can I fix this 100% height problem on Firefox HTML & CSS	6	18881	November 28, 2016
Flexbox wrapping issue ( appears to work in firefox) HTML & CSS	8	1587	July 21, 2015
Stop flex items matching the same height as others? HTML & CSS	14	29477	September 29, 2020
Alignment Problem in Chrome HTML & CSS	5	4037	March 8, 2010
Couple Issues With Nav and Div Height HTML & CSS	6	776	October 8, 2014

Flex box issues with chrome

Related topics