-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;
}
いくつかの場所でのコメントがあります。私はそれらを使っていくつかの結果を得ることができるかどうかを見てみましたが、何も助けにはなりませんでした。
StackOverflowへようこそ！質問には[最小限の、完全で検証可能な例]（https://stackoverflow.com/help/mcve）が含まれている必要があります。サーバーサイドコードを含める代わりに、生成されたマークアップを含めてください。また、ページに検証可能なデモがあるようにStack Snippetを作成することを検討してください。ページのどの部分がうまく機能していないのか、もう少し具体的にしようとしています。ありがとう。 – hungerstar
ああ、申し訳ありませんが、私はそれがCSSリファレンスを見ているだけで、コンテナやアイテムのようにディスプレイをフレキシブルにしたいと思っているのはわかりやすいはずだと思いました。どうすればこの問題を解決できますか？ –
[最小限の完全で検証可能な例]（https://stackoverflow.com/help/mcve）を作成してください。あなたがそうするなら、あなたはダウンボトムとより多くの答えを止めるでしょう。もともと投稿していたのであれば、今までに答えが出ていることをほぼ保証することができます。 Flexboxの質問はかなり一般的で、このサイトには知識のある人がたくさんいます。人々があなたを助けるためにできるだけシンプルにする必要があります。 MVCEを持たないような障壁を置くと、人々は次の質問に移ります。 – hungerstar