Question

我正在尝试使用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;
}

在某些地方有评论;我用它们来看看改变它们是否能得到一些结果，但没有任何帮助。

Answer 1

您可以使用它并添加滚动

.flex-container {
    overflow:auto;
}

或移除高度，容器一起生长。

显示flex不起作用

1 个答案: