translateX should wrap the text

Question

My first attempt with the transform command works in principle as it should, but when the sidebar opens, the text is out of its container. How can I prevent this? The text should be distributed over the remaining width, i.e. longer towards the bottom.

I've already tried it with overflow-wrap: break-word; but unfortunately that did not lead to success.

I hope my example is not too bad:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* make scrollbar transparent */


/* ::-webkit-scrollbar {display: none;}
::-webkit-scrollbar {width: 0px;background: transparent;} */

div {
  scrollbar-width: none;
}


/* make scrollbar transparent */

html {
  font-size: 0.8rem;
}

.wrapper {
  max-width: 800px;
  background: LightGrey;
}

.hide {
  display: none;
}

.menu {
  list-style-type: none;
}

ul li {
  color: white;
  font-weight: 100;
  text-decoration: none;
  font-size: 3rem;
  line-height: 5rem;
}

.content {
  width: 100%;
  font-size: 200%;
  padding: .5em;
  position: relative;
  transform: translateX(0px);
  transition: transform .6s, background-position 1s .6s;
}

.sidebar {
  background: DarkGrey;
  position: fixed;
  top: 0;
  bottom: 0;
  transform: translateX(-300px);
  transition: transform .6s, background-position 1s .6s;
}

.list {
  overflow-y: auto;
  padding: .5em;
  width: 300px;
  height: 300px;
}

#state_sidebar:checked~.wrapper .sidebar {
  transform: translateX(0);
  background-position: 0 0;
}

#state_content:checked~.wrapper .sidebar {
  transform: translateX(-300);
  background-position: 0 0;
}

#state_sidebar:checked~.wrapper .content {
  transform: translateX(300px);
}

#state_content:checked~.wrapper .content {
  transform: translateX(0px);
}

.sidebar_toggle_label {
  padding: .4em;
  font-size: 300%;
}

<input type="radio" name="grid" id="state_sidebar" class="hide" checked>
<input type="radio" name="grid" id="state_content" class="hide">

<div class="wrapper">
  <!--   <label for="menuToggler" class="menu-toggler">☰</label>
<input type="checkbox" id="menuToggler" class="input-toggler" checked /> -->
  <label class="sidebar_toggle_label" for="state_sidebar">&#9776;</label>

  <div class="content">
    <h1>Solar System</h1>
    <p>The Solar System is the gravitationally bound system of the Sun and the objects that orbit it, either directly or indirectly. Of the objects that orbit the Sun directly, the largest are the eight planets, with the remainder being smaller objects,
      the dwarf planets and small Soldar System bodies. Of the objects that orbit the Sun indirectly—the moons—two are larger than the smallest planet, Mercury.</p> 
  </div>
  <div class="sidebar">
    <label class="sidebar_toggle_label" for="state_content">&#10006;</label>
    <div class="list">
      <ul class="menu">
        <li>Mercury</li>
        <li>Venus</li>
        <li>Earth</li>
        <li>Mars</li>
        <li>Jupiter</li>
        <li>Saturn</li>
        <li>Uranus</li>
        <li>Neptune</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

You need to reduce the container (.content) width of 300px (sidebar's width).

You can set the transition on max-width.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* make scrollbar transparent */


/* ::-webkit-scrollbar {display: none;}
::-webkit-scrollbar {width: 0px;background: transparent;} */

div {
  scrollbar-width: none;
}


/* make scrollbar transparent */

html {
  font-size: 0.8rem;
}

.wrapper {
  max-width: 800px;
  background: LightGrey;
}

.hide {
  display: none;
}

.menu {
  list-style-type: none;
}

ul li {
  color: white;
  font-weight: 100;
  text-decoration: none;
  font-size: 3rem;
  line-height: 5rem;
}

.content {
  width: 100%;
  max-width:100%;
  font-size: 200%;
  padding: .5em;
  position: relative;
  transform: translateX(0px);
  transition: transform .6s, background-position 1s .6s,max-width .6s;
}

.sidebar {
  background: DarkGrey;
  position: fixed;
  top: 0;
  bottom: 0;
  transform: translateX(-300px);
  transition: transform .6s, background-position 1s .6s;
}

.list {
  overflow-y: auto;
  padding: .5em;
  width: 300px;
  height: 300px;
}

#state_sidebar:checked~.wrapper .sidebar {
  transform: translateX(0);
  background-position: 0 0;
}

#state_content:checked~.wrapper .sidebar {
  transform: translateX(-300);
  background-position: 0 0;
}

#state_sidebar:checked~.wrapper .content {
  transform: translateX(300px);
  max-width:calc(100% - 300px);
}

#state_content:checked~.wrapper .content {
  transform: translateX(0px);
}

.sidebar_toggle_label {
  padding: .4em;
  font-size: 300%;
}

<input type="radio" name="grid" id="state_sidebar" class="hide" checked>
<input type="radio" name="grid" id="state_content" class="hide">

<div class="wrapper">
  <!--   <label for="menuToggler" class="menu-toggler">☰</label>
<input type="checkbox" id="menuToggler" class="input-toggler" checked /> -->
  <label class="sidebar_toggle_label" for="state_sidebar">&#9776;</label>

  <div class="content">
    <h1>Solar System</h1>
    <p>The Solar System is the gravitationally bound system of the Sun and the objects that orbit it, either directly or indirectly. Of the objects that orbit the Sun directly, the largest are the eight planets, with the remainder being smaller objects,
      the dwarf planets and small Soldar System bodies. Of the objects that orbit the Sun indirectly—the moons—two are larger than the smallest planet, Mercury.</p> 
  </div>
  <div class="sidebar">
    <label class="sidebar_toggle_label" for="state_content">&#10006;</label>
    <div class="list">
      <ul class="menu">
        <li>Mercury</li>
        <li>Venus</li>
        <li>Earth</li>
        <li>Mars</li>
        <li>Jupiter</li>
        <li>Saturn</li>
        <li>Uranus</li>
        <li>Neptune</li>
      </ul>
    </div>
  </div>
</div>