All geek questions in one place

Issues with IE11 flex with package contents

I have the following code that has four columns wrapped over 2 rows using flex. In chrome and firefox, this works fine with the first element, which takes its own line, and then the second line, all elements correspond to the highest in this line.

However, in IE11, the elements in the second line correspond to the highest element of all 4 (and not just on its own line), which means that a lot of free space is created in the second line.

* {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
}

.grid-container {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.grid-column {
  padding-right: 12px;
  padding-bottom: 24px;
  padding-left: 12px;
  flex-basis: 100%;
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  flex-direction: column;
  display: flex;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.widget-article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grid-column:nth-child(1) .widget-article {
  flex-direction: row;
}

.widget-article__content {
  background: #313B3D;
  color: #ffffff;
  flex-grow: 1;
}

.widget-article__content a {
  color: #ffffff;
}
<div class="grid-container grid-container--listing grid-container--full-half-quarter">
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / column -->
</div>
Run code

Is there a way to make IE behave like chrome and firefox without changing the html structure?

+4
source share
2 answers

flexbox , .container, display: table. :

* {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
}

.grid-container {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.grid-column {
  padding-right: 12px;
  padding-bottom: 24px;
  padding-left: 12px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.widget-article {
  display: table;
  height: 100%;
}

.widget-article > * {
  display: table-row;
}

.grid-column:first-child .widget-article > * {
  display: table-cell;
  vertical-align: top;
}

.widget-article__content {
  background: #313B3D;
  color: #ffffff;
  height: 100%;
}

.widget-article__content a {
  color: #ffffff;
}
<div class="grid-container grid-container--listing grid-container--full-half-quarter">
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / column -->
</div>
+1

IE11 , .

:

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

... , Chrome Firefox, , IE11.

, - :

 /* pixel units for illustration purposes only */

.grid-column:nth-child(2) img {
  height: 250px;
}

.grid-column:nth-child(3) img,
.grid-column:nth-child(4) img {
  height: 125px;
}

jsFiddle demo

, , , . , , . , .

, IE11.

+1

Source: https://habr.com/ru/post/1682949/

More articles:


All Articles