css - 三列，调整最大高度到最后一列，用CSS overflow hidden

Question

我想要一个响应式的三列，每列宽度为 33.33%。 最后一栏为主，整个内容的高度不能高于最后一栏的高度。但是，前两列逐个显示带有文本的 div 列表，并且它们的高度可能高于第三列。我想隐藏前两列的溢出，如果某些文本 div 不可见，我很好。最具挑战性的是在内容底部隐藏部分可见的文本 div。

我做了这样的事情:

.content { width: 800px; display: table; table-layout: fixed; background-color: #fff}
.oneandtwo {width: 66.66%; display: table-cell; position: relative; overflow: hidden; vertical-align: top;}
.oneandtwocontainer {display: table; table-layout: fixed; position: absolute; }
.one, .two {width: 50%; display: table-cell; vertical-align: top;}
.third {width: 33.33%; display: table-cell; background-color: #ddd; vertical-align: top;}
.text {padding: 10px; border: 1px dotted black}
.shouldbehidden {background-color: #fca2a2 }

<div class="content">
  <div class="oneandtwo">
    <div class="oneandtwocontainer">
		 <div class="one">
		 
			<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
    		<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
			<div class="text shouldbehidden" > Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
    		<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
			<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
    		<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>

			
		 </div>
		 <div class="two">
		 
			<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
    		<div class="text"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
			<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
    		<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
			<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>
    		<div class="text shouldbehidden"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.  </div>



		 </div>
	 </div>
  </div>
  <div class="third">
       <div class="text"> Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.  </div>

  </div>
</div>

由于位置 - 相对/绝对和溢出:隐藏，内容的高度正在调整为第三列的高度。但是，我希望此示例中的所有红色文本框都变得不可见 - 截断的文本看起来很糟糕。

我想我可以用 flex 布局来做到这一点，但不知 Prop 体怎么做。

我知道 javascript 可以解决这个问题(例如使用 jQuery outerHeight() 计算)，但首先我想尝试使用纯 css。

有什么想法吗？

Answer 1

是这样的吗？

* {
  box-sizing: border-box;
}
.content {
  position: relative;
  overflow: hidden;
}
.one,
.two,
.three {
  width: 33.3%;
  padding: 0 1em;
}
.one,
.two {
  position: absolute;
}
.one {
  left: 0;
}
.two {
  left: 33.3%
}
.three {
  position: relative;
  left: 66.6%;
}

<div class="content">
  <div class="oneandtwo">
    <div class="oneandtwocontainer">
      <div class="one">

        <div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>


      </div>
      <div class="two">

        <div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
        <div class="text shouldbehidden">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>



      </div>
    </div>
  </div>
  <div class="three">
    <div class="text">Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Maecenas malesuada elit lectus felis, malesuada ultricies.
      Curabitur et ligula. Ut molestie a, ultricies porta urna.</div>

  </div>
</div>