7

I'm working on a project and I'm using display: table and table-row with overflow auto. But it's nothing behaving as expected in Firefox (and IE).

In Chrome, it's behaving as it should though.

There's this question on StackOverflow, which seems quite similar to my problem, but no answer or samples are given.

I've tried to reproduce this in JSbin and Fiddle, but that didn't work.

To illustrate the behaviour in Chrome and Firefox I've made two screengrabs:

Desired behaviour in Chrome

Undesired behaviour in Firefox

I have also set up a small-scale HTML example, which can be found here. You can reproduce by opening the website in Chrome and Firefox and expand the textarea until the bottom containers overflows the page.

Code

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.tableWrapper {
  display: table;
  height: 100%;
  background: darkgrey;
  table-layout: fixed;
  width: 800px;
  margin: 0 auto;
}
.textArea {
  background: #F9F9F9;
  padding: 10px 10px 5px 10px;
  margin: 10px;
}
.content {
  display: table-row;
  height: 100%;
  margin: 10px;
}
.content div {
  display: block;
  overflow: auto;
  height: calc(100% - 20px);
  height: -webkit-calc(100% - 20px);
  height: -moz-calc(100% - 20px);
  background: #ADE6DF;
  margin: 10px;
}
.content p {
  background: white;
  margin: 10px;
  padding: 5px;
}
<div class="tableWrapper">
  <div class="textArea">
    <textarea></textarea>
  </div>
  <div class="content">
    <div>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
    </div>
  </div>
</div>

It's very frustrating, I hope someone knows what happening.

3
  • I don't know for certain if it has anything to do with the fact that anonymous table boxes are being generated all over the place to keep the layout together (.textArea lives in an anonymous table-cell in an anonymous table-row in .tableWrapper, and .content div lives in an anonymous table-cell within .content).
    – BoltClock
    Feb 19, 2016 at 15:59
  • @BoltClock Do you have an idea how to fix this? Feb 22, 2016 at 14:21
  • @Patrick Hofman: Nope, sadly.
    – BoltClock
    Feb 22, 2016 at 14:27

2 Answers 2

1
+50

if you are okay with flex, you may use it : ( https://jsfiddle.net/x59n7Lek/ - https://jsfiddle.net/x59n7Lek/1/ )

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tableWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: darkgrey;
  table-layout: fixed;
  width: 800px;
  margin: 0 auto;
  max-width: 100%;
  /*for the demo snippet */
  max-height: 100%;
  /* maybe you still want to see the content if textarea is too big ? */
  overflow: auto;
}

.textArea {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #F9F9F9;
  padding: 10px 10px 5px 10px;
  margin: 10px;
}

textarea {
  height: 100%;
  /* optionnal */
}

.content {
  margin: 10px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.content div {
  flex: 1;
  overflow: auto;
  display: block;
  background: #ADE6DF;
  margin: 10px;
}

.content p, footer,header {
  background: white;
  margin: 10px;
  padding: 5px;
}
<div class="tableWrapper">
  <div class="textArea">
    <textarea></textarea>
  </div>
  <div class="content">
    <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header>
    <div>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
    </div>
    <footer>footer</footer>
  </div>
</div>

2
  • Thanks! But in the large scale project, there's going to be a table inside the bottom container with horizontal scrolling. With this solution, you would first have to scroll down to be able to scroll horizontal. The '.content div' should have overflow: auto, not '.content'. If this behaviour would be possible with flex, I'm listening! To further illustrate what I mean, this is what I would want: From: joshuahazelaar.nl/tablerow/1.png to joshuahazelaar.nl/tablerow/2.png
    – Goombah
    Feb 19, 2016 at 15:22
  • 1
    @Goombah added a title in content and imbricated flex one lower level more, see snippet update if that meets your final résult. Not sure i understood what you looked for. :) a fiddle to play with jsfiddle.net/x59n7Lek and a footer too jsfiddle.net/x59n7Lek/1
    – G-Cyrillus
    Feb 19, 2016 at 15:42
0

This seems to do the trick. Hope its useful.

	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	.tableWrapper {
		display: table;
		height: 100%;
		background: darkgrey;
		table-layout: fixed;
		width: 800px;
		margin: 0 auto;
	}

	.content {
		display: table-row;
		height: 100%;
	}

	.content div {
  display: block;
  overflow: auto;
		/*
			height: calc(100% - 20px);
			height: -webkit-calc(100% - 20px);
			height: -moz-calc(100% - 20px);
		*/
	height: 100%;
	background: #ADE6DF;
	margin: 10px;
	max-height: 80vh;
	min-height: 80vh;
	overflow: auto;
	}
	.content p {
		background: white;
		margin: 10px;
		padding: 5px;
	}
	.textArea {

	}
	.content p, footer,header {
		background: white;
		margin: 10px;
		padding: 5px;
	}
	<div class="tableWrapper">
		<div class="textArea">
		<textarea></textarea>
		</div>
		<div class="content">
			<div>
				<header>preview a bit small, test snippet in full page mode then resize window for behaviors</header>

					<p>
					Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
					</p>
					<p>
					Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
					</p>

		</div>
    <footer>footer</footer>

	</div>

</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.