HTML & CSS - layout questions (using grid & flexbox)

Question

Codepen: https://codepen.io/pprunesquallor/pen/qKxvrX

I'm a beginner playing around with grid and flexbox.

I'd like the height of the article element (yellow) to be only just as long as the text requires (so in this case cca half as long), and therefore the aside element (grey) should be of the same height depending on the height of the article, and scrollable.

Thank you in advance!!

html, body {
    height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  align-items: stretch;
}

header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  background-color: lime;
}

header > h1 {
  margin: 0;
  background-color: brown;
}

nav {
    display: flex;
    flex-direction: row;
    background-color: orange;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: row;
  background-color: red;
}

article {
  background-color: yellow;
}

aside {
  width: 50%;
  overflow: auto;
  overflow-y: scroll;
  background-color: grey;
}

footer {
  grid-area: footer;
  background-color: pink;
}

<html lang="en">
  <body>
    <header>
      <h1 id="title">Header Title</h1>
      <nav>   
        <form style="display: inline" action="http://google.com" target="_blank">
          <button>Link 1</button>
        </form>        
        <form style="display: inline" action="http://google.com" target="_blank">
          <button>Link 2</button>
        </form>        
        <form style="display: inline" action="http://google.com" target="_blank">
          <button>Link 3</button>
        </form>
      </nav>
    </header>
    <main id="main">
      <article id="info">
        <h2>Article Title</h2> 
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.         
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <a id="link" href="" target="_blank">Link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci leo et ex. Vivamus ut aliquet massa.
        <br>
        Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
      </article>
      <aside><h3>Aside</h3>
          Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis. 
          <br>
          Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere. Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis. 
          <br>
          Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa, sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
      </aside>
    </main>
    <footer>Footer</footer>
  </body>
</html>

Did you need this behavior: https://codepen.io/SelenIT/pen/bKKMdZ ? — Ilya Streltsyn, Jun 23 '18 at 21:58

sol · Accepted Answer · 2018-06-23T21:29:42.013

Is there a way to do this just with CSS?

You could use positioning.

HTML: Wrap the aside content in an additional container

<aside>
  <div class="aside__inner">
    ...content...
  </div>
</aside>

CSS:

aside { 
  position: relative;
}

.aside__inner {
  position: absolute;
}

codepen

If you need the header and footer to expand so that the article is only as tall as its content, you can add grid-template-rows: auto min-content auto to body.
I'd also suggest using min-width instead width on aside

html,
body {
  height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "footer";
  align-items: stretch;
  /* added */
  grid-template-rows: auto min-content auto;
}

header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  background-color: lime;
}

header>h1 {
  margin: 0;
  background-color: brown;
}

nav {
  display: flex;
  flex-direction: row;
  background-color: orange;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: row;
  background-color: red;
}

article {
  background-color: yellow;
}

aside {
  width: 50%;
  overflow: auto;
  overflow-y: scroll;
  background-color: grey;
  position: relative;
}

.aside__inner {
  position: absolute;
}

footer {
  grid-area: footer;
  background-color: pink;
}

<html lang="en">

<body>
  <header>
    <h1 id="title">Header Title</h1>
    <nav>
      <form style="display: inline" action="http://google.com" target="_blank">
        <button>Link 1</button>
      </form>
      <form style="display: inline" action="http://google.com" target="_blank">
        <button>Link 2</button>
      </form>
      <form style="display: inline" action="http://google.com" target="_blank">
        <button>Link 3</button>
      </form>
    </nav>
  </header>
  <main id="main">
    <article id="info">
      <h2>Article Title</h2>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      <a
        id="link" href="" target="_blank">Link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec
        feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci
        leo et ex. Vivamus ut aliquet massa.
        <br> Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus
        vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis
        consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
    </article>
    <aside>
      <div class="aside__inner">
        <h3>Aside</h3>
        Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet
        odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis
        placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum
        at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
        <br> Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere.
        Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
        <br> Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa,
        sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
      </div>
    </aside>
  </main>
  <footer>Footer</footer>
</body>

</html>

That's just perfect, it is exactly the answer I was looking for. Thank you so much! — P. Prunesquallor, Jun 24 '18 at 15:52
Could you please explain why the CSS (relative position on the aside and absolute on .aside_inner) works as it does? — P. Prunesquallor, Jun 24 '18 at 16:01

score 0 · Answer 2 · answered Jun 21 '18 at 19:10

0

Would this do what you want? https://codepen.io/anon/pen/OEZMwV

I just added the following JS, added an ID to <aside>, and changed the display of the #info id.

$("#aside").css({
    'height': ($("#info").height() + 'px')
});

answered Jun 21 '18 at 19:10

Axion

682
4
20

I tried that, but unfortunately it didn't change anything... :( – P. Prunesquallor Jun 21 '18 at 19:18
2

@P.Prunesquallor the codepen I linked to didn't change anything? I forgot to mention that you'll need to embed a jquery library for it to work... such as – Axion Jun 21 '18 at 20:59
No, it didn't. The aside element (grey) is still longer than the rest. :/ – P. Prunesquallor Jun 22 '18 at 20:19
1

@P.Prunesquallor Did you see Axion's codepen? I looked at it and it seems to do what you want. The gray part is scrollable and both the gray and yellow sections are the same height as the content in the yellow section. – Cave Johnson Jun 23 '18 at 19:53
Ah!! Now I see it! Something was different when I looked at it yesterday. That's great, very to-the-point solution! Thanks, Axion. But is there a way to do this just with CSS? I'll wait a bit longer and if no-one else replies, I'll accept this solution. – P. Prunesquallor Jun 23 '18 at 20:41
Trouble is - it's not really responsive in an appropriate way. :( Try changing the width of the code editor in Codepen... – P. Prunesquallor Jun 23 '18 at 20:44

score 0 · Answer 3 · answered Jun 24 '18 at 05:54

Here's a pen where I have this working.

https://codepen.io/anon/pen/jKKvpb

Basically, what you're asking for is not possible given the HTML/CSS you provided. The grid rows will automatically size themselves according to the height of the tallest item in the column. There's no way to grab the natural height of the <article> element due to the the flex css on <main>.

The workaround is to add a wrapper <div> around the <article> element. I did this with jQuery because I'm lazy but you should probably add it to the HTML. I did add some css to make the colors of the divs match up.

Here's my code:

//wrap the article in a div 
jQuery('#info').wrap('<div id="article-wrap"></div>');

//a function that gets the height of the article and sets the aside to the height of the article
function sizeMe() {
    var height= jQuery('#info').height();
    jQuery('#aside').css('height', height);
}

//run the function on page load
sizeMe();

//to make it responsive run the function if the page is resized.
jQuery(window).resize( function(){
     sizeMe();
});

HTML & CSS - layout questions (using grid & flexbox)

3 Answers3