我正在尝试使用CSS设置display: flex
部分,但似乎我无法做到。我用CSS尝试了很多不同的组合,结果只是改变了我的部分的大小,但当该部分达到我设置的最大高度时,元素就会消失。
这是我的HTML代码,我想在flex模式下显示元素:
<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;
}
在某些地方有评论;我用它们来看看改变它们是否能得到一些结果,但没有任何帮助。
答案 0 :(得分:3)
您可以使用它并添加滚动
.flex-container {
overflow:auto;
}
或移除高度,容器一起生长。