我想使用flex在屏幕右侧制作一个可以在hr下方滚动的侧栏。我设置了列但由于某种原因，侧栏列显示在main-content-column下面而不是最右边。这些类是“sidebar-column-right”和content-right。我是使用flexbox的新手，所以我可能做错了。
<html>
<head>
<title>Militia</title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="main-content.css">
</head>
<body>
<div id="container";>
<header>
<ul class="left";>
<li class="nav";><a class="a a-nav-top leftbuttons"; href="#">Home</a></li>
<li class="nav";><a class="a a-nav-top leftbuttons"; href="#">Shop</a></li>
<li class="nav";><a class="logobutton"; href="https://www.youtube.com/channel/UCmZOe6sv3wuq97Vo-9Rdyyw"; target="_blank";>RG</a></li>
<li class="nav";><a class="a a-nav-top rightbuttons"; href="#">Archives</a></li>
<li class="nav";><a class="a a-nav-top rightbuttons"; href="#">Suggestions</a></li>
</ul>
</header>
<div class="home";>
<h1>Home</h1>
<p>Hello welcome to my site you guys know me already Recht A.K.A Domo. Here you can find my video upload schedule, previous video, current video, and you can make suggestions on what games I play.</p>
<hr>
<div class="main-content-column-left";>
<div class="content-left";>
<h2>Previous Video (As of Jun-29-16):</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/bDXMLKNPUGw" frameborder="0" allowfullscreen></iframe>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, sale labore in mea. Eirmod deleniti probatus ne quo, nec cu graeci appellantur, latine denique usu ea. Pri nonumes quaerendum cu. Tollit possim accommodare ei vel, ne augue ludus constituto sea. Mel summo scripta omittantur ad, cum ei zril quaeque definiebas.</p>
</div>
<div class="content-left">
<h3>Upload Schedule:</h3>
<ol>
<li id="schedule";>Mondays: Upload</li>
<li id="schedule";>Tuesday: Upload</li>
<li id="schedule";>Wendsday: Upload</li>
<li id="schedule";>Thurday: Break</li>
<li id="schedule";>Friday: Upload</li>
<li id="schedule";>Saturday: Production</li>
<li id="schedule";>Sunday: Production</li>
</ol>
</div>
</div>
<div class="sidebar-column-right">
<div class="content-right";>
<h2>Im a side bar</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
</div>
</div>
#container { /* added */
width: 100%; /* adjust to your needs */
max-width: 100%; /* responsive */
margin: 0 ; /* horizontal centering */
border: solid #DC143C;
color: #DC143C;
}
.home{
color: #DC143C;
}
.main-content-column-left{
color: #DC143C;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.sidebar-column-right{
border-left: solid 1px;
display: flex;
color: #DC143C;
border: solid 1px red;
width: 33.3%;
overflow-y: auto;
}
.content-left > iframe { /* added */
width: 560px;
height: 315px;
max-width: 100%;
max-height: 100%;
color: #DC143C;
}
.content-left{
color: #DC143C;
width: 33%;
}
.content-right{
}
h1{
color: #DC143C;
text-align: center;
}
h2.previousvid
{
text-align: left;
font-size: 20px;
}
h3.sidecontent{
text-align: right;
}
hr{
border: 1px solid #DC143C;
}
ol {
list-style-type: decimal;
}
答案 0 :(得分：0)
希望这是你所期待的。我在class = "flex-box"和"sidebar-column-right"类之上添加了content-right的div并更改了一些css。请在链接中运行plunker代码。