Expand borders in cells to the cell with tallest content

Question

Is it possible to have a table:

Consisting of two side-by-side, equal-width cells
With a border and margin around the cell content
With both borders expanding to match the height of the tallest content in either?

Standard HTML tables, Bootstrap 3 or Flexbox are all options - I'm testing it using Firefox, Chrome and IE 11.

Using Bootstrap row and col classes, I have tried adding a div inside each cell to style the content, and I can get a margin around the content, but the cells won't match the height of the text. Or I can get the cells to fit the text by taking away the divs, but removing the divs means losing the margin. Or I can set a fixed height, but then the window can be resized to make the text fall down below that height.

Seems like a perfect candidate for flexbox, no need for a big library like bootstrap — Esko, May 28 '18 at 12:10
I just found this Flexbox example: http://jsfiddle.net/poztin/MFHj7/1/ . You can modify 'left' and 'right' to have a margin of 20px but these still both fill 100% of the available height rather than just satisfying the text. Still experimenting. — matt_rule, May 28 '18 at 12:13
Could you share an image of what you’re trying to accomplish and/or the code you’ve tried so far? — Tim Ellison, May 28 '18 at 12:28

score 1 · Answer 1 · answered May 28 '18 at 12:47

Answer based on this page about Flexbox. Works on Chrome, Firefox and IE 11.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you scroll all the way down on that page to the bit just before the "Prefixing Flexbox" section, there is an image which looks like this:

To suit our purpose, all that's needed is to:

remove all boxes but two of the middle ones
add margins
Use display: flex to make sure they don't fall below each other when resizing the page.
Make them the same width

Final result:

Here is the modified code used to achieve this (.htm page):

<html>
  <head>
    <style>
      .wrapper {
        display: flex;  
        flex-flow: row;
        font-weight: bold;
        text-align: center;
      }

      .wrapper > * {
        padding: 10px;
        flex: 1 100%;
      }

      .d1 {
        text-align: left;
        background: deepskyblue;
        margin: 20px;
      }

      .d2 {
        text-align: left;
        background: gold;
        margin: 20px;
      }

      @media all and (min-width: 600px) {
        .aside { flex: 1 auto; }
      }

      @media all and (min-width: 800px) {
        .d1    { order: 1; }
        .d2 { order: 2; } 
      }

      body {
        padding: 2em; 
      }
    </style>
  </head>
  <body>
    <div style="border: 1px solid black;">
      <div class="wrapper">
        <article class="d1">
          <p>
          </p>  
        </article>
        <article class="d2">

          <p>
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
          </p>  
        </article>
      </div>
    </div>
  </body>
</html>

score 1 · Accepted Answer · answered May 28 '18 at 12:47

1

Based on your description I think this is what you want: https://codepen.io/timothyjellison/pen/wXwqpo

The key is to set the container div to display: flexbox and then set the content divs to flex: 1.

See this question for some further elaboration: Flexbox not giving equal width to elements

answered May 28 '18 at 12:47

Tim Ellison

353
5
10

I posted my own answer but accepted this one because it uses vastly fewer lines of code to achieve the same thing. Tested and works on IE FF and Chrome. – matt_rule May 28 '18 at 12:51

Expand borders in cells to the cell with tallest content

2 Answers2