SOURCE

<div class="box fixed">
	<div class="header"></div>
  
  <div class="menu">
  	<div class="item">热点新闻</div>
    <div class="item">全国</div>
    <div class="item">视频</div>
    <div class="item">娱乐</div>
    <div class="item">体育</div>
    <div class="item">经济</div>
    <div class="item">科技</div>
    <div class="item">社会</div>
  </div>
</div>
<div class="box main">
  <div class="content">
  	<div class="section">
    	<img class="img" src="/upload/avatar/default.png">
      <div class="artical">
        <h2 class="title">JSRun</h2>
        <p class="detail">jsrun是一款免费的在线JS编辑器, 可以免费保存、分享js源码,提供Embed服务 在线JS编辑器让在线开发、分享WEB应用成为了可能。</p>
      </div>
    </div>
    <div class="section">
    	<img class="img" src="/upload/avatar/default.png">
      <div class="artical">
        <h2 class="title">JSRun</h2>
        <p class="detail">jsrun是一款免费的在线JS编辑器, 可以免费保存、分享js源码,提供Embed服务 在线JS编辑器让在线开发、分享WEB应用成为了可能。</p>
      </div>
    </div>
    <div class="section">
    	<img class="img" src="/upload/avatar/default.png">
      <div class="artical">
        <h2 class="title">JSRun</h2>
        <p class="detail">jsrun是一款免费的在线JS编辑器, 可以免费保存、分享js源码,提供Embed服务 在线JS编辑器让在线开发、分享WEB应用成为了可能。</p>
      </div>
    </div>
    <div class="section">
    	<img class="img" src="/upload/avatar/default.png">
      <div class="artical">
        <h2 class="title">JSRun</h2>
        <p class="detail">jsrun是一款免费的在线JS编辑器, 可以免费保存、分享js源码,提供Embed服务 在线JS编辑器让在线开发、分享WEB应用成为了可能。</p>
      </div>
    </div>
    <div class="section">
    	<img class="img" src="/upload/avatar/default.png">
      <div class="artical">
        <h2 class="title">JSRun</h2>
        <p class="detail">jsrun是一款免费的在线JS编辑器, 可以免费保存、分享js源码,提供Embed服务 在线JS编辑器让在线开发、分享WEB应用成为了可能。</p>
      </div>
    </div>
  </div>
</div>

* {
  margin: 0;
  box-sizing:border-box;
}
.fixed {
  position:fixed;
  z-index:5;
}

.box {
  width:100%;
  display:flex;
  flex-wrap: wrap;
}
.header {
  flex: 1 1 100%;
  height: 50px;
  background: #919a33;
}
.menu {
  flex: 1 1 100%;
  background: #b0b38f;
  height: 30px;
  display: flex;
  align-items:center;
  overflow-x: scroll;
}
.menu::-webkit-scrollbar {display:none}
.menu .item {
  flex: 1 0 auto;
  //min-width:60px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align:center;
  padding:0 10px; 
  background:rgba(255,255,255,0.9);
  color:#cddca5;
  font-size: 10px;
  margin-right: 10px;
}
.menu .item:last-of-type {
  margin-right:5px;
}

.main {
  position:relative;
  top:80px;
}
.content {
  flex: 1 1 100%;;
  display: flex;
  flex-wrap: wrap;
  width:100%;
}
.section {
  flex: 1 1 100%;
  border: 10px solid #cecdb6;
  height: 100px;
  padding: 10px;
  width:100%;
  
  display: flex;
}
.img {
  flex: 0 0 60px;
  height: 60px;
}
.artical {
  flex: 1 1 auto;
  padding: 0 20px;
  display:flex;
  flex-wrap: wrap;
  overflow:hidden;
  //width:100%;
}
.title {
  flex: 1 1 100%;
  width:100%;
  
  height: 16px;
  font-size:16px;
  line-height:16px;
}
.detail {
  flex: 1 1 100%;
  max-width:100%;
  width:100%;
  
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  
  height: 30px;
  font-size:10px;
  line-height:15px;
}