显示器弯曲不起作用

-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

非常感谢我所问！ –

显示器弯曲不起作用

回答

相关问题