CODEWITHSUNDEEP
htmlcssflexbox
6epcepk
6epcepk

Reputation: 45

CSS3 FLEXBOX not correct working Chrome (FF - OK)

Some structure working good in FF, but Chrome is NOT.

Stack snippet

html, body {
    height: 100%!important; width: 100%!important;
    margin: 0!important; padding: 0!important;
}

.x {display: flex; flex-direction: column; height: 100%; width: 100%;}
    .x-header {background-color: silver;}
    .x-body {flex: 1 1 auto; overflow-y: auto;}

/* CONTENT WITH 2 COLUMNS */
.x-structure-2-columns {display: flex; flex-direction: row; height: 100%; width: 100%;}
    .x-structure-2-columns-left {background-color: lightgreen; width: 100px;}
    .x-structure-2-columns-right {display: flex; flex: 1 1 auto; overflow-y: auto; flex-direction: column;}
        .x-structure-2-columns-right-header {background: yellow;}
        .x-structure-2-columns-right-body {flex: 1 1 auto; overflow-y: auto; min-height: 0px; background: pink;}
<div class="x">
    <div class="x-header">This is a header</div>
    <div class="x-body">
        <div class="x-structure-2-columns">
            <div class="x-structure-2-columns-left">
                LEFT
            </div>
            <div class="x-structure-2-columns-right">
                <div class="x-structure-2-columns-right-header">SUB NAVIGATION</div>
                <div class="x-structure-2-columns-right-body"><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p></div>
            </div>
        </div>
    </div>
</div>

2 columns must be fixed, but they are not in Chrome.

Here is also a fiddle: https://jsfiddle.net/q28v4z05/

Thanks!

Upvotes: 0

Views: 48

Answers (1)

Asons
Asons

Reputation: 87191

Here you've used height: 100%, combined with partial nested Flexbox.

That is not recommended, as e.g. a flex item normally use flex-grow or align-items to fill a given height/width of its parent, and with that, does not have a height set. So when a child of a flex item gets one, using percent, it will in most cases resolve to auto and cause it all to not work properly.

Instead use Flexbox all the way.

The main fix here is to reset min-height's default auto to 0 on x, allowing it to be smaller than its content, combined with adding display: flex, making it a flex container.

With this we can remove the height: 100% on .x-structure-2-columns and let Flexbox take care of the space distribution.

Note, instead of min-height: 0, one can use overflow (with a value other than visible), as you did in some place with overflow-y: auto;, though the min-height is more proper when it comes to readability, unless one need e.g. a scrollbar, like on the x-structure-2-columns-right-body.

I also cleaned up some properties, that is either not needed or had its default value.

Below sample is tested with success on the lastest version of Chrome, Firefox, Edge, and IE11.

Updated fiddle

Stack snippet

html, body {
  height: 100%;
  margin: 0;
}

.x {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.x-header {
  background-color: silver;
}

.x-body {
  flex: 1;
  min-height: 0;                          /*  added  */
  display: flex;                          /*  added  */
}


/* CONTENT WITH 2 COLUMNS */
.x-structure-2-columns {
  flex: 1;                                /*  fill width  */
  display: flex;
}

.x-structure-2-columns-left {
  background-color: lightgreen;
  width: 100px;
}

.x-structure-2-columns-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.x-structure-2-columns-right-header {
  background: yellow;
}

.x-structure-2-columns-right-body {
  flex: 1 1 auto;
  overflow-y: auto;
  background: pink;
}
<div class="x">
  <div class="x-header">This is a header</div>
  <div class="x-body">
    <div class="x-structure-2-columns">
      <div class="x-structure-2-columns-left">
        LEFT
      </div>
      <div class="x-structure-2-columns-right">
        <div class="x-structure-2-columns-right-header">SUB NAVIGATION</div>
        <div class="x-structure-2-columns-right-body">
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions