GeoMaps GeoMaps - 5 months ago 19
CSS Question

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

I'm trying to have my child

div
inside the parent
div
fitting the
height
and
width
of the child
div
to the space that has left inside its parent.

Furthermore, I'd like to scroll just the child
div
in the
Y axis
. I used the
overflow-y:auto
to achieve this, however it's scrolling both in X and Y axis. (See snippet below).



#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

add box-sizing:border-box to fit the width/height

Then the horizontal bar is caused by not having spaces between words, so eiher

  • change overflow-y:auto for overflow-x:hidden

or if you are planning in having texts without spaces (which seems unlikely)

  • use word-wrap: break-word or 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>