Элементы Flexbox, не отображающие корректно на Firefox

Question

Сначала эта проблема возникала только в заголовке, теперь, когда я попытался исправить ее, используя Bourbon mixins с префиксом поставщика, все было разработано, это происходит и в основном корпусе. По крайней мере, это может обеспечить способ изолировать проблему, поскольку я опубликовал страницу до исправления и после, для сравнения.

Before, где раздел и в сторону в div с классом контейнера отображаются правильно в текущей версии Firefox - два динамических столбца.

After, где эти части штабелируются и игнорируют flexbox, как и заголовок.

CSS-за Перед:

.container { 
    display: flex; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    flex-wrap: wrap; 
    justify-content: flex-end; 
    align-items: stretch; } 

section { 
    display: flex; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    padding: 15px; 
    min-width: 350px; 
    flex: 1; 
    margin-top: 3vw; 
    margin-left: 6vw; } 

aside { 
    min-width: 250px; 
    flex: 0.5; 
    margin-top: 5vw; 
    display: flex; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    flex-flow: column nowrap; 
    justify-content: flex-start; 
    align-items: stretch; } 

Я думаю, что это все, что релевантно. Префиксы поставщика не в правильном порядке, но он работает.

.container { 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-lines: multiple; 
    -moz-box-lines: multiple; 
    box-lines: multiple; 
    -webkit-flex-wrap: wrap; 
    -moz-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -webkit-box-pack: end; 
    -moz-box-pack: end; 
    box-pack: end; 
    -webkit-justify-content: flex-end; 
    -moz-justify-content: flex-end; 
    -ms-justify-content: flex-end; 
    -o-justify-content: flex-end; 
    justify-content: flex-end; 
    -ms-flex-pack: end; 
    -webkit-box-align: stretch; 
    -moz-box-align: stretch; 
    box-align: stretch; 
    -webkit-align-items: stretch; 
    -moz-align-items: stretch; 
    -ms-align-items: stretch; 
    -o-align-items: stretch; 
    align-items: stretch; 
    -ms-flex-align: stretch; } 

section { 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    padding: 15px; 
    min-width: 350px; 
    -webkit-flex-grow: 1; 
    -moz-flex-grow: 1; 
    flex-grow: 1; 
    -ms-flex-positive: 1; 
    margin-top: 3vw; 
    margin-left: 6vw; } 

aside { 
    min-width: 250px; 
    flex: 0.5; 
    margin-top: 5vw; 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-flow: column nowrap; 
    -moz-flex-flow: column nowrap; 
    flex-flow: column nowrap; 
    -webkit-box-pack: start; 
    -moz-box-pack: start; 
    box-pack: start; 
    -webkit-justify-content: flex-start; 
    -moz-justify-content: flex-start; 
    -ms-justify-content: flex-start; 
    -o-justify-content: flex-start; 
    justify-content: flex-start; 
    -ms-flex-pack: start; 
    -webkit-box-align: stretch; 
    -moz-box-align: stretch; 
    box-align: stretch; 
    -webkit-align-items: stretch; 
    -moz-align-items: stretch; 
    -ms-align-items: stretch; 
    -o-align-items: stretch; 
    align-items: stretch; 
    -ms-flex-align: stretch; } 

Там все префиксы поставщика, кажется, правильный, но в стороне стопки под секции, та же проблема, как и классы заголовка Sec1 и сек2. Я проверил Flexbugs GitHub repo и не нашел объяснений там. Кто-нибудь видит проблему?

Answer 1

Ваша проблема вы имея flex-grow:1, который означает, что вы будете иметь по умолчанию flex-basis: auto, если вы используете flex:1 он установит flex: 1 1 0 (flex-basis:0), фиксируя проблему

Взгляните на этот большой guide about flexbox

Здесь представляет собой упрощенную фрагмент

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
section { 
 
    flex: 1; 
 
    margin-left: 6vw; 
 
    margin-top: 3vw; 
 
    /*min-width: 350px; - removed for demo */ 
 
    padding: 15px; 
 
} 
 
aside { 
 
    flex: 0.5; 
 
    margin-top: 5vw; 
 
/* min-width: 250px; - removed for demo */ 
 
}

<div class="container"> 
 
    <section> 
 
    <div class="outerDiv"> 
 
     <div class="innerDiv intro"> 
 
     <h1>Realistic Lunar Colony, Coming Online</h1> 
 
     <p> 
 
      This project is building a series of virtual colonies on the Moon. They will be richly detailed and interactive presentations that are entirely plausible, technically and scientifically. They will examine all the questions, consider all the implications. 
 
      When humanity undertakes ventures on the scale of space settlement, it matters a great deal how many people have given it real thought beforehand. These colonies serve that purpose. 
 
      <br> 
 
      <br>The first colony created will show a full town with a population of 20,000. It will have developed industries and facilities, spacious beautiful architecture, transport systems moving high volumes of people and cargo around the Moon and the 
 
      solar system. It shows what happens just beyond the tipping point, when technology enables a space boom. To evaluate the importance of space exploration, this is the stage that must be understood. 
 
      <br> 
 
      <br>The next two colonies work outwards from there... forwards to the city that grows from the town, when technology allows a segmented glass dome to be placed over a crater 22 km across, becoming home to a million people... and backwards to the 
 
      first missions that develop the basic techniques and infrastructure that make it all possible. 
 
      <br> 
 
      <br>These environments will be places to explore, create, collaborate, tell stories, and above all to learn and to contemplate our future. To that end, the project assumes an ideal political environment, in which a broad alliance of countries pursues 
 
      lunar settlement with determination and vision, making the best technical decisions and investing as much as it takes to do it properly. In this way the project can educate regarding the real gamut of options before us, and the complete scope 
 
      of such a vast endeavor. 
 
      <br> 
 
      <br>The entire project will always be open source, free of copyright, and free of charge. In this way, as long as it has a strong core framework, it has incredible potential for growth. Some virtual world project along these lines is going to explode 
 
      in the near future. The time is right. Once a world is vivid enough, and provides the right tools, it will mushroom as talented people see the potential and dive in. Never have there existed ways for so very many people to collaborate so powerfully. 
 
      Moonwards can reach towards two final frontiers - the one above our heads, and the one inside our heads. Let us see how powerful vision can be. 
 
      <br> 
 
      <br>All the project's files are on the <a href="https://github.com/briligg/moonwards"> 
 
GitHub repository of Moonwards</a>. It is at an early stage. It will always be 'under construction', though - that's its nature. You will see this revamped website filling out in the coming weeks, and then get new content regularly as the project advances. 
 
      The same will happen to the repo, after that. You will see the models changing and new models being added, animated, and supplemented with other media. When the first, simple version of the virtual colony comes online, then we are really rolling. 
 
      If you are inclined to take part, please contact me, comment in one of the sections provided, or use the other contact options shown on the <a href="project.html">Project</a> page. 
 
     </p> 
 
     <p class="byline"> 
 
      Jan. 11, 2017 by Kim -- kim@moonwards.com 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </section> 
 
    <aside> 
 
    <div class="sideDiv" id="RSS-feed"> 
 
     <p id="item2" class="atom"><span class="datetime">Mon, 07 Nov 2016 19:50:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">Lalande map</a></span><span class="description">Kim has finished composing an extremely detailed map of the Lalande crater. It is a huge file, but available at request.</span> 
 
     </p> 
 
     <p id="item1" class="atom"><span class="datetime">Tue, 01 Nov 2016 21:50:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">3D models</a></span><span class="description">We now have 3D content available. Blend4web and Sketchfab models are now viewable in your browser.</span> 
 
     </p> 
 
     <p id="item0" class="atom"><span class="datetime">Tue, 01 Nov 2016 21:45:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">News feed for Moonwards</a></span><span class="description">For all of you out there wanting to keep up with Moonwards, we are now going to post brief news to this handwritten RSS feed. Also consider our <a href="https://moonwards1.blogspot.com/feeds/posts/default">blog feed</a></span> 
 
     </p> 
 
    </div> 
 
    <div class="sideDiv"> 
 
     <div class="framewrap frame16x9"> 
 
     <iframe src="https://www.youtube.com/embed/vF--hweQ1Ec" allowfullscreen=""></iframe> 
 
     </div> 
 
    </div> 
 
    </aside> 
 
</div>

Answer 2

В ПЕРЕД макете, проблема, кажется, решена, просто определив высоту для изображения:

.sec1 { 
    flex-grow: 4; 
    min-width: 400px; 
    padding-right: 60px; 
    margin-top: 2vw; 
    height: 100%; /* new */ 
} 

Chrome автоматически ограничивающей изображение на высоту родителя:

header { height: 290px; } 

Firefox по-видимому, требуется инструкция сделать то же самое.

---

Кроме того, в связи с вашими префиксов, это всегда лучше, чтобы перечислить стандартное свойство (W3C версии) последняя – после всех приставочных версий. Для получения более подробной информации:

• What is the proper way to order vendor prefixes for flexbox?