Display-Flex funktioniert nicht

-3

Ich versuche, einen Abschnitt mit display: flex mit CSS, aber es scheint, ich kann es nicht tun. Ich habe so viele verschiedene Kombinationen mit CSS probiert und das Ergebnis ist nur die Größe meiner Sektion zu ändern, aber das Element geht nach draußen, wenn die Sektion die maximale Höhe erreicht, die ich eingerichtet habe.Display-Flex funktioniert nicht

Hier ist mein HTML-Code, wo ich das Element in Flex-Modus angezeigt werden soll:

<section id="BattlesH" class="flex-container"> 
    <h3><a name="hiphop">HipHop</a></h3> 
    <div id="MyApp"> 
     <% if (req.user) { %> 
      <input type="button" value="Show Hide DIV" v-on:click="ShowHide" /> 
     <%}%> 
     <div v-show = "IsVisible"> 
      <label for="youtube">YouTube url</label> 
      <input type="text" id="youtube" v-model="text" placeholder="Paste your YouTube video link"><br> 
      <button v-on:click="loadVideo">Add Video</button> 
     </div> 
    </div> 
    <section id="wrapPartecipant1" class="videoYoutube" v-for="item in videos"> 
     <section> 
      <!-- IFRAME PER OGNI VIDEO CONTENUTO NEL DB --> 
      <iframe class="partecipant" v-bind:src="item.video.url"> </iframe> 
      <!-- PRELEVO DAL DB IL CONTEGGIO DEI VOTI --> 
      <p id="voti" > {{item.count}} </p> 
      <% if (req.user) { %> 
       <!-- AGGIUNGO UN VOTO --> 
       <input type="button" id="buttonVoti" v-on:click="addVoto(item._id)"> 
       <!--<iframe id="partecipant1" src="https://www.youtube.com/embed/............"></iframe>--> 
      <%}%> 
     </section> 
    </section>

CSS:

.flex-container{ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display:flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-items: flex-start; 
    align-content: flex-start; 
} 
    #BattlesH{ 
    /*width:700px;*/ 
    height: auto; 
    max-height: 600px; 
    margin:5px; 
    padding: 10px; 
    /*float:right;*/ 
    border-radius: 10px; 
    border:2px solid black; 
    background:#ccffcc; 
    position: relative; 
    text-align: center; 
    color: black; 
}

In einigen Orten gibt Kommentare sind; Ich habe sie benutzt, um zu sehen, ob sie etwas ändern können, aber nichts half.

Quelle

2017-08-28 Danny V V

Willkommen bei StackOverflow! Ihre Frage sollte ein [minimales, vollständiges und überprüfbares Beispiel] (https://stackoverflow.com/help/mcve) enthalten. Anstatt den serverseitigen Code einzuschließen, fügen Sie bitte das generierte Markup hinzu. Ziehen Sie auch in Erwägung, ein Stack-Snippet zu erstellen, damit auf der Seite eine überprüfbare Demo angezeigt wird. Versuchen Sie, etwas genauer zu sein, welcher Teil der Seite nicht funktioniert. Vielen Dank. – hungerstar

oh entschuldigung, ich dachte, es war einfach nur auf die css-Referenz und sollte einfach zu verstehen, welche ich würde Display flex wie Container und die Elemente zu machen. Also, wie behebe ich dieses Problem? –

Erstellen Sie ein [minimales, vollständiges und überprüfbares Beispiel] (https://stackoverflow.com/help/mcve). Wenn du das tust, hörst du auf, Abstimmungen und mehr Antworten zu bekommen. Ich kann fast garantieren, dass Sie jetzt eine Antwort haben würden, wenn Sie ursprünglich beim Posten hatten. Flexbox-Fragen sind ziemlich häufig und es gibt viele erfahrene Menschen auf dieser Website. Sie sollten es so einfach wie möglich machen, damit Leute Ihnen helfen können. Das Aufstellen von Hindernissen für die Hilfe, d. H. Keine MVCE, wird Menschen dazu bringen, mit der nächsten Frage fortzufahren. – hungerstar

können Sie diese verwenden und eine Scroll-

.flex-container { 
    overflow:auto; 
}

oder die Höhe hinzufügen, entfernen, und der Behälter zusammen wachsen.

Quelle

2017-08-28 21:26:27

Danke genau was ich gefragt habe !! –

Display-Flex funktioniert nicht

Antwort

Verwandte Themen