小编Raf*_*cer的帖子

我的应用程序中的样式具有以下结构：

应用

- css/
   - bootstrap/
      - boostrap.less -> has (@import "another.less")
      - another.less
   - common/
      - common.less
   - entries/
      - bootstrap.js -> has (import style from "../bootstrap/bootstrap.less")
      - common.js -> has (import common from "../common/common.less")

现在我需要从导入到条目 bootstrap.js 和 common.js 的样式中创建单独的 CSS-es。

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
    entry: {
        "boostrap": ["./css/entries/boostrap.js"]
    },
    module: {
        rules: [
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ]
}

包.json

{ …

我想使用 CSS 网格在两列中显示两个区域。但是，左列的高度必须与右列的高度相同。

如果左列高于右列，则左列中的内容应该是可滚动的。

我想要实现的目标：

如果没有以像素为单位的硬编码高度，我就无法做到这一点。仅通过 CSS 可以做到这一点吗？或者我需要使用 JavaScript 重新计算左列高度？

我附上jsFiddle来看看。

https://jsfiddle.net/rafalcypcer/2teonuhy/17/

谢谢，

拉法尔

.gridwrapper {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-auto-rows: 200px;
  grid-gap: 10px;
  grid-template-rows: auto;
}

.column {
  background: green;
}

.dynamic-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: pink;
  margin: 20px;
}

.list {
  overflow-y: auto;
  margin: 20px;
  height: 100%;
}

.item {
  height: 50px;
  background: yellow;
  border: 2px solid black;
}

<div class="gridwrapper">
      <div class="column">
        <div class="list">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div> …