Css表，侧面有可扩展的div

Question

我有一个中央div，其中有4个div（顶部，右侧，左侧，底部）。

顶部和底部 div可以修复。他们不必增加高度和宽度。

右和左 div仅用于增加其宽度。

如何？

＆＃34;内容＆＃34; div（central）是一个可以拥有用户想要的行数的表。然后，我想增加或减少左和右 div的高度，具体取决于＆＃34;内容＆＃34;的高度。

我想自动执行此操作。

我该怎么做？

我已经用我所做的创造了一个例子，没有成功。

https://jsfiddle.net/y6ad2crg/4/

<div class="pantalla">
    <div  class=" pantallaSup"></div>

        <div class="pantallaEsq"></div>
        <div class="pantallaDre"></div>

        <div class="interiorPantalla">
            content<br>
            aaa<br>
            bbb<br>
            ccc<br>
            ddd<br>
            eee
        </div>
        <div class="pantallaInf"></div>
</div>

我想得到的结果是：

我做错了什么？

也许只是改变css中的小东西它可能会完成，或者我的html设计错误......

Answer 1

我相信我已编写了您正在寻找的内容 - https://jsfiddle.net/Shuaso/vpmn3LLv/

我删除了所有不必要的div并使用CSS边框和背景颜色来实现相同的效果。您可以更改＆＃34;内容＆＃34;中的内容。 div并查看动态样式。这是代码：

CSS：

.container {
  width: 500px;
  background-color: orange;
  padding: 20px 0;
}
.content {
  border-left: 20px solid red;
  border-right: 20px solid green;
  background-color: white;
}

HTML：

<div class="container">
  <div class="content">
    <p>test</p>
    <p>test</p>
  </div>
</div>

Answer 2

更改你的代码 https://jsfiddle.net/p7haf3oo/

.pantalla {
  /*position: relative;*/
  display: block;
  width: 690px;
  background-color: gray;
}

.pantallaSup {
  height: 200px;
  width: 100%;
  background: orange;
}

.flex {
  display: flex;
  align-items: stretch;
}

.pantallaEsq {
  width: 69.4px;
  border-right: 4px solid black;
  background: red;
  display: block;
}

.pantallaDre {
  width: 69.4px;
  border-left: 4px solid black;
  background: red;
  display: block;
  align-self: stretch;
  min-height: 100px;
}

.pantallaInf {
  height: 200px;
  width: 100%;
  background: orange;
}

.interiorPantalla {
  position: relative;
  margin: 0 auto;
  border: 1px;
  border-color: blue;
  border-style: solid;
  width: 550px;
  background-color: white;
}

<div class="pantalla">
  <div class="pantallaSup"></div>
  <div class="flex">
    <div class="pantallaEsq"></div>
    <div class="interiorPantalla">
      content
      <br> aaa
      <br> bbb
      <br> ccc
      <br> ddd
      <br> eee
    </div>
    <div class="pantallaDre"></div>
  </div>
  <div class="pantallaInf"></div>
</div>