CSS 网格侧列将不包含子项

Question

我希望有一个带有侧边栏和主要部分的非常简单的布局。

我希望侧边栏根据内容调整其宽度，但只能调整到某个点，这样主要内容就不会被推到页面之外，如果宽度受到限制，我只想将文本省略.我正在尝试通过使用 fit-content(20%) 来做到这一点，但它不会限制侧边栏的大小。

我有一个这样的例子 at this plnkr 我有。

可以看出，即使没有宽度，侧面文本也不会保持包含状态，更不用说如果我设置更大的宽度了。

我该怎么做？

body {
  height: 50%;
  width: 50%;
  padding: 5px;
  border: purple solid 1px;
}

#container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: fit-content(20%) 1fr;
  border: red solid 1px;
  padding: 5px;
}

#sidebar {
  /* width: 700px; */
  border: green solid 1px;
}

#item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js"></script>
</head>

<body>
  <div id="container">
    <div id="sidebar">
      <div id="item">
        some long long long long long text text text here here here
      </div>
    </div>
    <div id="main">
      <div>Main content</div>
    </div>
  </div>
</body>

</html>

Answer 1

将此添加到您的代码中：

* {
  box-sizing: border-box;
}

#sidebar {
  min-width: 0;
}

min-width: 0 是为了防止所谓的“网格井喷”，这使得 #container 忽略其给定宽度并从其容器中伸出。

阅读更多相关信息 here。

To apply our fix, we need to make sure that there is the column has a definite minimum width instead of auto.

所以我们给网格项一个确定的min_width，在我们的例子中是0。

此外，box-sizing: border-box 防止 #container 由于其父级的填充而从 body 中伸出。这意味着元素通过其边框计算其宽度，包括填充。

* {
  box-sizing: border-box;
}

body {
  height: 50%;
  width: 50%;
  padding: 5px;
  border: purple solid 1px;
}

#container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: fit-content(20%) 1fr;
  border: red solid 1px;
  padding: 5px;
}

#sidebar {
  /* width: 700px; */
  min-width: 0;
  border: green solid 1px;
}

#item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js"></script>
</head>

<body>
  <div id="container">
    <div id="sidebar">
      <div id="item">
        some long long long long long text text text here here here
      </div>
    </div>

    <div id="main">
      <div>Main content</div>
    </div>
</body>

</html>

希望这就是你想要的。

CSS 网格侧列将不包含子项

CSS grid side column will not contain child item

html

css

css-grid