顯示器彎曲不起作用

-3

我想用CSS設置一個與display: flex的部分，但似乎我不能這樣做。我嘗試了很多與CSS不同的組合，結果只是改變了我的部分的大小，但當部分達到我設置的最大高度時，元素就會到達外部。顯示器彎曲不起作用

這裏是我的HTML代碼，我想顯示彈性模式的元素：

<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; 
}

在一些地方，也有意見;我用它們來看看改變它們是否可以得到一些結果，但沒有任何幫助。

來源

2017-08-28 Danny V V

歡迎來到StackOverflow！你的問題應該包含一個[最小，完整和可驗證的例子]（https://stackoverflow.com/help/mcve）。請不要包含服務器端代碼，而應包含生成的標記。另請考慮製作一個Stack Snippet，以便在頁面中有可驗證的演示。嘗試更具體一些頁面的哪些部分不起作用。謝謝。 – hungerstar

哦，對不起，我認爲這很簡單，只是看着CSS參考，應該很容易理解哪一個我想使容器和項目顯示flex。那麼我該如何解決這個問題呢？ –

請創建一個[最小，完整和可驗證示例]（https://stackoverflow.com/help/mcve）。如果你這樣做，你會停止獲得提示和更多答案。我幾乎可以保證，如果您最初發布信息，您現在可以得到答案。 Flexbox的問題很常見，本網站上有很多知識淵博的人士。你應該儘可能簡單地讓人們來幫助你。設置障礙來幫助，即沒有MVCE，會導致人們轉向下一個問題。 – hungerstar

您可以使用此，並添加滾動

.flex-container { 
    overflow:auto; 
}

或刪除高度和容器一起成長。

來源

2017-08-28 21:26:27

非常感謝我所問！ –

顯示器彎曲不起作用

回答

相關問題