如何将 child div 放入 parent 并仅在 Y 轴上滚动溢出文本

Question

我正在尝试让我的 child div 位于 parent div 中以适合 height 和 width child div 到其 parent 内留下的 space。

此外，我只想滚动 Y axis 中的 child div。我使用 overflow-y:auto 来实现这一点，但是它在 X 轴和 Y 轴上都滚动。（见下面的片段）。

#Parent {
  border: 2px solid #fff;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
  text-align: center;
  padding: 0 5px 5px 5px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#Parent > #Child {
  background-color: blue;
  font-family: arial, sans-serif;
  text-align: left;
  margin-top: 7px;
  padding-right: 20px;
  display: block;
  font-size: 11px;
  vertical-align: top;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

<div id="Parent">
  <h6>Help Me</h6>
  <div id="Child">
    <p>
      dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>
    </p>
  </div>

</div>

Answer 1

添加此样式可使文本在没有空格的情况下自动换行：

#Parent > #Child {
  word-break: break-all;
}

#Parent {
  border: 2px solid #fff;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
  text-align: center;
  padding: 0 5px 5px 5px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#Parent > #Child {
  background-color: blue;
  font-family: arial, sans-serif;
  text-align: left;
  margin-top: 7px;
  padding-right: 20px;
  display: block;
  font-size: 11px;
  vertical-align: top;
  overflow-y: auto;
  word-break: break-all;
  width: 100%;
  height: 100%;
}

<div id="Parent">
  <h6>Help Me</h6>
  <div id="Child">
    <p>
      dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>
    </p>
  </div>

</div>

Answer 2

添加box-sizing:border-box以适应width/height

那么横条是单词之间没有空格造成的，所以eiher

将 overflow-y:auto 更改为 overflow-x:hidden

或者如果您打算使用没有空格的文本（这似乎不太可能）

使用word-wrap: break-word或word-break: break-all

*,
*::before,
*::after {
  box-sizing: border-box;
}
#Parent {
  border: 2px solid #fff;
  text-align: center;
  padding: 5px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#Parent > #Child {
  background-color: blue;
  font-family: arial, sans-serif;
  text-align: left;
  padding-right: 20px;
  display: block;
  font-size: 11px;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

<div id="Parent">
  <div id="Child">
    <p>
      dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>
    </p>
  </div>

</div>

Answer 3

尝试在占位符文本中插入几个空格。问题是浏览器不会插入换行符，而是使 child div 变宽。但对于由单词组成并以空格分隔的真实文本，这不会有问题。

编辑：您也可以考虑@Rick Hitchcock 的回答。

如何将 child div 放入 parent 并仅在 Y 轴上滚动溢出文本

How to fit the child div inside parent and scroll the overflow text only in the Y axis

html

css

overflow