调整嵌套 div 的百分比，使其适合 12 列系统

Question

我有以下网站结构，适合使用 flexbox 的 12 列系统：

它基本上是网站的菜单、侧边栏和内容类型。 12 列系统中 individual 列的宽度为 8.3333%。在内容 div 中有两个嵌套的 content-left 和 content-right divs.

我的问题是，是否可以设置 content-left 和 content-right div 的 flex-basis 属性，使它们完全适合12 列系统（content-right div 从“项目”菜单项开始的位置开始）？

尽我所能，我似乎没有做对。例如，设置 .content-left { flex-basis: 25% } 和 .content-right { flex-basis: 50% } 不会得到想要的结果，因为这些 div 嵌套在内容 div 中，它测量 75%，而不是 100%宽度。

如有任何帮助，我们将不胜感激。

PHP:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="page">
        <div class="menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Projects</li>
                <li>Contact</li>
            </ul>
        </div>
        <div class="main">
            <div class="sidebar">
            </div>
            <div class="content">
                <div class="content-left">
                </div>
                <div class="content-right">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

.page {
    max-width: 1440px;
    margin: 0 auto;
}

.menu ul {
    display: flex;
}

.menu li {
    flex-basis: 25%;
}

.main {
    display: flex;
}

.sidebar {
    flex-basis: 25%;
}

.content {
    display: flex;
    flex-basis: 75%;
}

.content-left {
    flex-basis: ???%;
}

.content-right {
    flex-basis: ???%;
}

Answer 1

应该是1/3和2/3（9列你会分成3和6）

.page {
  max-width: 1440px;
  margin: 0 auto;
}

.menu ul {
  display: flex;
  padding:0;
}

.menu li {
  flex-basis: 25%;
  list-style:none;
  outline:1px solid red;
}

.main {
  display: flex;
}

.sidebar {
  flex-basis: 25%;
  background:pink;
}

.content {
  display: flex;
  flex-basis: 75%;
  height:50px
}

.content-left {
  flex-basis: calc(1/3 * 100%);
  background:red;
}

.content-right {
  flex-basis: calc(2/3 * 100%);
  background:blue;
}

<div class="page">
  <div class="menu">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Projects</li>
      <li>Contact</li>
    </ul>
  </div>
  <div class="main">
    <div class="sidebar">
    </div>
    <div class="content">
      <div class="content-left">
      </div>
      <div class="content-right">
      </div>
    </div>
  </div>
</div>

调整嵌套 div 的百分比，使其适合 12 列系统

Adjust percentage in nested divs so it fits a 12 cols system

css

grid

flexbox