Question

我试图仅使一个div滚动，但是我不知道这样做。

我希望h2和c（黑色和蓝色）保持原样，并且只有d（粉红色）可以滚动。

现在，整行都可以滚动。

.a {
   background-color:red;
   width: calc(100vw - 3rem); 
   overflow:scroll;
}

.b {
  background-color:green;
  display: inline-flex;

  height:3rem;
}

.c {
  background-color:blue;
  display: inline-flex;
  width:3rem;
  height:3rem;
}

.d {
  background-color:pink;
  display: inline-flex;
  width:133rem;
  height:3rem;
}

h2 {
  background-color:black;
  user-select: none;
  font-weight:600;
  font-size: 1.5rem;
  height: 1.9rem;
  width: 4.1rem;
  margin-top: auto;
  margin-bottom: auto;
  height:3rem;
}

<div class='a'>
  <div class='b'>
    <h2></h2>
    <div class='c'></div>
    <div class='d'></div>
  </div>
</div>

Answer 1

将position:fixed;用于h2，并将.c用于position:fixed;left:4.1rem;，因为您的h2宽度为4.1rem，因此请使用left：4.1rem

.a {
   background-color:red;
   width: calc(100vw - 3rem); 
   overflow:scroll;
}

.b {
  background-color:green;
  display: inline-flex;

  height:3rem;
}

.c {
  background-color:blue;
  display: inline-flex;
  width:3rem;
  height:3rem;  
  position:fixed;
  left:4.1rem;
}

.d {
  background-color:pink;
  display: inline-flex;
  width:133rem;
  height:3rem;
}

h2 {
  background-color:black;
  user-select: none;
  font-weight:600;
  font-size: 1.5rem;
  height: 1.9rem;
  width: 4.1rem;
  margin-top: auto;
  margin-bottom: auto;
  height:3rem;
  position:fixed;
  left:0rem;
}

<div class='a'>
  <div class='b'>
    <h2></h2>
    <div class='c'></div>
    <div class='d'></div>
  </div>
</div>

Answer 2

尝试

MAY
Event 1
Event 2
Event 3
JUNE
Event 4
JULY
Event 5

.a {
   background-color:red;
   width: calc(100vw - 3rem); 
   overflow:scroll;
}

.b {
  background-color:green;
  display: inline-flex;

  height:3rem;
}

.c {
  background-color:blue;
  display: inline-flex;
  width:3rem;
  height:3rem;
}

.d {
  background-color:pink;
  display: inline-flex;
  width:133rem;
  height:3rem;
}

h2 {
  background-color:black;
  user-select: none;
  font-weight:600;
  font-size: 1.5rem;
  height: 1.9rem;
  width: 4.1rem;
  margin-top: auto;
  margin-bottom: auto;
  height:3rem;
}

<div class='a'>
  <div class='b'>
    <h2></h2>
    <div class='c'></div>
    <div class='d'></div>
  </div>
</div>

.a {
   background-color:red;
   width: 100%;
}

.b {
  background-color:green;
  display: flex;
  flex-wrap:wrap;
  height:3rem;
}

.c {
  background-color:blue;
  width:3rem;
  height:3rem;
}

.d {
  background-color: pink;
    width: calc(100% - 7.1rem);
    height: 3rem;
    overflow-x: auto;
}
.d div{
width: 133rem;
    overflow: auto;
    height: 3rem;
}

h2 {
  background-color:black;
  user-select: none;
  font-weight:600;
  font-size: 1.5rem;
  height: 1.9rem;
  width: 4.1rem;
  margin-top: auto;
  margin-bottom: auto;
  height:3rem;
}

CSS：只有一个div可滚动

2 个答案: