为什么侧边栏在 React.js 中没有粘性或固定在左侧和右侧？

Question

我有一个react.js项目，一切正常，但是当我删除中间部分的组件时，左右侧边栏移动到中间部分。我想在左侧和右侧设置粘性侧边栏，即使我删除了中间的提要组件。任何想法将不胜感激。

截图1：

截图2：

Widgets.js:

   import React from 'react';
import './Widgets.css'; 
import InfoIcon from '@material-ui/icons/Info';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';

function Widgets() {
    const newsArticle = (heading, subtitle) => (
<div class="widgets__article">
<div class="widgets__articleLeft">
 <FiberManualRecordIcon/>
</div>
<div class="widgets__articleRight">
    <h4>{heading}</h4>
    <p>{subtitle}</p>
</div>
</div>
    )
    return (
        <div className= 'widgets'>
<div class="widgets__header">
    <h2>LinkedIn News</h2>
    <InfoIcon/>
</div>
{newsArticle("Nesim11 react clone", "Top news - 9099 readers")}
{newsArticle("The Six Morning Habits of High Performers", "How to Be Awesome at Your Job")}
{newsArticle("Unconscious Bias", "Stacey Gordon")}
{newsArticle("Nesim11 react clone", "Top news - 9099 readers")}
{newsArticle("The Six Morning Habits of High Performers", "How to Be Awesome at Your Job")}
{newsArticle("Unconscious Bias", "Stacey Gordon")}
</div>
    );
}

export default Widgets

Widgets.css:

  .widgets {
    position: sticky;
    top: 80px;
    flex:0.2;
    background-color: white;
    border-radius: 10px;
    border: 1px solid lightgray;
    height: fit-content;
    padding-bottom: 10px;
}
.widgets__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    
}
.widgets__header > h2 {
    font-size: 16px;
    font-weight:400;
}
.widgets__article{
    display: flex;
    padding:10px; 
    cursor: pointer;
}
.widgets__article:hover{
    background-color:whitesmoke;
}
.widgets__articleLeft{
    color: #0177b7;
    margin-right: 5px;
}
.widgets__articleLeft > .MuiSvgIcon-root {
    font-size: 15px;
}
.widgets__articleRight{
    flex: 1;
}
.widgets__articleRight > h4 {
    font-size: 14px;
}
.widgets__articleRight > p {
    font-size: 12px;
    color:grey;
}

Answer 1

我建议在您的容器元素上使用 justify-content 并将其设置为 space 之间。您可以尝试一些 other ones，看看您最喜欢什么。

这是一个简单的例子：

.container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.box {
  width: 100px;
  height: 100px;
}

.one {
  background: blue;
}

.two {
  background: red;
}

.three {
  background: yellow;
}

https://jsfiddle.net/fm05h2dq/

为什么侧边栏在 React.js 中没有粘性或固定在左侧和右侧？

Why sidebar not sticky or fixed in left and right side in React.js?

reactjs

sidebar

sticky