John Doe John Doe - 7 months ago 11
HTML Question

Flex row vs colum help, layout not appearing as intended

I have been stuck on this for a few days, no matter what I do I can't get the layout to function as desired. Can anyone help me complete this layout so I hopefully grasp the concept..

I thought this should work as desired but it doesn't.

The first flex parent(main) has 3 row children(left/center/right). The child container(center) should contain another flex parent(sub) which has 3 column children(header/content/footer). When content is overflowing the page should expand downward (which it is not doing) and when there is no content the page should fill up height and width(which its not doing).

Here is a visual representation I made in paint to help understand my issue.

Layout Image

JSFIDDLE Link

The ratios in (header/content/footer) dont work and doing 100% height in the .sub .content overflows the page in the wrong way..

‚Äč<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin:0px;
border:0px;
}
.main{
margin-top:-20px;

height:100%;
display:flex;
flex-direction:row;
}

.main .left{
background:#009246;
flex: 1;
}
.main .center{
background:#F1F2F1;
flex: 3;
}
.main .right{
background:#CE2B37;
flex: 1;
}
.sub{
width:100%;
flex-direction:culumn;
}
.sub .header{
background:blue;
flex: 1;
}
.sub .content{
background:orange;
flex: 5;
}
.sub .footer{
background:blue;
flex: 1;
}
</style>

</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="sub">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
<div class="right">right</div>
</div>
</body>
</html>

Answer

as mention, you have a mistake in html structure.

For the css part, you may imbricate flex containers, and inherit height from html and only use min-height on main container : https://jsfiddle.net/qmwymy26/4/

        * {
          margin: 0px;
          border: 0px;
        }
        .main {
          min-height: 100%;
          display: flex;
          flex-direction: row;
        }
        .main .left {
          background: #009246;
          flex: 1;
        }
        .main .center {
          background: #F1F2F1;
          flex: 3;
          display: flex;
          flex-direction: column;
        }
        .main .right {
          background: #CE2B37;
          flex: 1;
        }
        .sub {
          display: flex;
          width: 100%;
          flex-direction: column;
          flex: 1;
        }
        .sub .header {
          background: blue;
          flex: 1;
        }
        .sub .content {
          background: orange;
          flex: 5;
        }
        .sub .footer {
          background: blue;
          flex: 1;
        }
        html,
        body {
          height: 100%
        }
:checked ~ br {display:none;}
label {font-size:2em;}
<div class="main">
  <div class="left">left</div>
  <div class="center">center
    <div class="sub">
      <div class="header">header</div>
      <div class="content">
        <label for="hd">click me to hide br tags </label><input type="checkbox" id="hd" />
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>
      </div>
      <div class="footer">footer</div>
    </div>
  </div>
  <div class="right">right</div>
</div>

Comments