Inline flex container (display: inline-flex) with the full width of parent 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

Inline flex container (display: inline-flex) with the full width of parent 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">

.out {<!--   w  w  w . j a  v  a  2 s.  c  o m-->
   border: 1px solid red;
   display: block;
   position: fixed;
   top: 0;
   left: 0;
}
.row {
   display: inline-flex;
   flex-direction: row;
   padding: 10px;
   border: 1px solid yellow;
}
.infos {
   border: 1px solid green;
   flex-basis: 350px;
}
.dynamic {
   border: 1px solid blue;
   margin:auto
}


      </style> 
 </head> 
 <body> 
  <div class="out"> 
   <div class="row"> 
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a 
    </div> 
    <div class="dynamic">
      Lorem ipsum 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials