Create a horizontally scrollable content with fixed width inside a nested flex container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Width

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Width

Description

Create a horizontally scrollable content with fixed width inside a nested flex container

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body,<!-- w w  w.  j  a v a 2  s  .co  m-->
html,
.container {
   height: 100%;
}
body {
   color: #fff;
}
.container {
   display: flex;
   overflow: hidden;
}
.sidebar {
   width: 200px;
   flex-shrink: 0;
   background: red;
}
.main {
   flex: 1;
   display: flex;   
   min-width: 0;
}
.content {
   flex: 1;
   background: blue;   
   min-width: 0;
}
.scroll {
   overflow-x: auto;
}
.overflowing {
   width: 1024px;
}
.panel {
   width: 100px;
   flex-shrink: 0;
   background: green;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="sidebar"></div> 
   <div class="main"> 
    <div class="content"> 
     <div class="scroll"> 
      <div class="overflowing">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lorem blandit, aliquet augue in, egestas risus. Curabitur sit amet justo eget metus faucibus sodales. Vestibulum rhoncus vel libero id imperdiet. Quisque ante quam, tempus in metus a, aliquam sollicitudin tortor. Nam in sagittis nunc, et feugiat augue. Phasellus augue lacus, maximus et ipsum ac, placerat tincidunt risus. Curabitur velit diam, fermentum ac quam eget, ultricies elementum ipsum. Nullam justo dolor, consequat porttitor semper a, eleifend vitae ante. Phasellus egestas dolor sed erat dapibus, a scelerisque dui sagittis. Pellentesque eget venenatis nisi. Vestibulum neque nisl, cursus ut sagittis a, ultrices ac nunc. Etiam auctor nunc porta leo fermentum, a iaculis leo vestibulum. Donec lobortis, tellus a aliquet malesuada, ipsum elit sagittis lectus, sed mollis magna diam eu mauris. Vivamus semper nunc eget nunc lacinia pharetra. 
      </div> 
     </div> 
    </div> 
    <div class="panel"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials