我需要編輯我在互聯網上找到的這個布局，但它是在CSS flex中，我對flex一無所知，但只是普通的舊CSS。

如何在不損壞代碼的情況下安全地編輯？

body {
  margin: 0;
  padding: 0;
  font-size: 30px;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: white;
}

.header,
.footer {
  flex: 0 0 50px;
  background: #34495e;
}

.content-body {
  /*   flex: 1 1 auto; */
  flex-grow: 1;
  /* equla to: height: calc(100vh - 100px); */
  display: flex;
  flex-direction: row;
}

.content-body .content {
  /*   flex: 1 1 auto; */
  flex-grow: 1;
  /* width: calc(100% - 200px); */
  overflow: auto;
  background: #1abc9c;
}

.content-body .sidenav,
.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .sidenav {
  background: #e74c3c;
}

.content-body .ads {
  background: #e67e22;
}

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <nav class="sidenav">This must be deleted</nav>
    <main class="content">Content</main>
    <aside class="ads">Aside</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

只需刪除sidenav元素和相關的css。proporty flex:0 0 100px將flex-grow設置為0(即不增長)，將flex-shrink設置為0(即不變小)，將flex-basis設置為100px，即保持100 px的寬度。

這里有一個關于CSS技巧的解釋

Kevin Powell的這個視頻是flexbox的一個很好的開端。

希望這有所幫助。

body {
  margin: 0;
  /*padding: 0; body has no padding by default so removed this*/
  font-size: 30px;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: white;
}

.header,
.footer {
  flex: 0 0 50px;
  background: #34495e;
}

.content-body {
  /*   flex: 1 1 auto; */
  flex-grow: 1; /* equla to: height: calc(100vh - 100px); */
  display: flex;
  /*flex-direction: row;  this is default so removed it */
}

.content-body .content {
  /*   flex: 1 1 auto; */
  flex-grow: 1; /* width: calc(100% - 200px); */
  overflow: auto;
  background: #1abc9c;
}

.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .ads {
  background: #e67e22;
}

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <main class="content">Content</main>
    <aside class="ads">Aside</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>