CSS flexbox-Breite 100% Firefox

Ich habe ein Problem mit diesem Szenario in Firefox. #pager nimmt die Breite Ihrer Kinder. Jedoch, in Chrom, nimmt es die Breite des übergeordneten Elements ein. Wie kann ich machen #item-Liste hinsichtlich der Breite des übergeordneten Elements in Firefox?

werfen Sie einen Blick! https://jsfiddle.net/owmpatbh/2/

HTML:

<div id="wrapper">
  <div id="sidebar"></div>
    <div id="main">
      <div id="content">
        <p id="stuff">blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>            
      </div>
      <div id="pager">
          <div id="item-list">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
          </div>
      </div>
   </div>
</div>

CSS:

#wrapper {


 display: flex;
  width: 100%;
  height: 100%;
}

#sidebar {
  overflow: auto;
  flex: 0.25;
  border:3px solid green;
  min-height: 200px; 
}

#main {
  display: flex;
  flex: .75;
  flex-direction: column;
  border:3px solid orange;
}

#content {
  position: relative;
  width: 100%;
  flex: 0.85;
  border: 3px solid blue;
}

#pager {
  display: flex;
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 3px solid pink;
  flex: 0.15;
}

#item-list {
  border: 1px solid black;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.item {
    display: inline-block;
    padding: 5px;
    width: 200px;
    height: 200px;
    background-color: red;
}

#stuff {
    height: 200px;
}

*{
    margin: 3px;
}
es scheint nicht, wie die Feste 200px Breite aus irgendeinem Grund. nicht sicher, warum noch
Da bist du mit flex, sollten Sie nicht verwenden müssen width: 100% überall. Wobei es sich nicht etwas zu brechen, in Chrome, noch machen Sie nichts Schlimmeres im firefox. Firefox scheint zu wollen eine Feste Breite für #item-list, aber wieder, ich ' m nicht sicher, warum. Es scheint nicht zu wollen, Griff der inline-block Kinder richtig (oder vielleicht das Verhalten ist nicht gut definiert noch?)

InformationsquelleAutor ericleo | 2015-05-08

  1. 3

    firefox hat Probleme mit der Breite des Objekts #item-list. Ich kann nicht denken an nichts anderes, dann ist dies ein bug, zumindest chrome ist weniger wählerisch über die Breite. Also, was Sie tun müssen ist, geben Sie eine Feste Breite, wie gesagt, durch redbmk. So, hier ist die Lösung:

    legen Sie die #item-list position zu absolute und geben Sie es ein width von 100% (im Beispiel minus-die Grenze der divs).

    #pager {
  display: flex;
  position: relative;
  background-color: #fff;
  border: 3px solid pink;
  height:246px;
}

#item-list {
  border: 1px solid black;
  position:absolute;
  width: calc(100% - 9px);
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

    Ich habe auch einige kleine(nicht wirklich wichtige Dinge) in Ihrem code.

    es hier zu sehen:

    Jsfiddle

    Prost!

    InformationsquelleAutor Evochrome

  2. 1

    hier ist ein funktionierender link https://jsfiddle.net/ymvmf6zz/1/

    anscheinend explizit die Einstellung der Breite auf #sidebar und #main machte es Arbeit.

    #sidebar{
    width: 25%;
}
#main{
    width: 75%;
}
    Gut,das mag wahr sein;aber warum das nicht funktioniert?
    Dies funktionierte perfekt für mich. Vielen Dank 🙂

    InformationsquelleAutor galki

Schreibe einen Kommentar