Html 如何通过减小div（及其内容）来防止文本中断？

我想将div锁定在一个特定的大小，超过这个大小（更小的屏幕），div及其内容应该变小，并保持查看风格。 简言之，我如何防止这种情况：

变成这样：

代码如下：

html:

---

尝试将文本放入框中，用

百分比

为该框添加宽度，并用

百分比

设置

字体大小

---

希望这对您有所帮助。

您的预期结果是什么？文本必须进行一些修改，而我已经提到，我希望div及其内容变得更小，超出固定点。然后使用媒体屏幕，如100px到300px，减小字体大小要将字体大小减小到需要放大镜才能阅读的程度吗？我并不特别希望字体大小减小，我希望整个div及其内容变小。

<div class="content">
      <div class="boxy">
        <div class="a mw"><b>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ante metus dictum at tempor.</b> 
        </div>
        <div class="b mw">
          cidunt. Vulputate ut pharetra sit amet aliquam id diam. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Duis at consectetur lorem donec massa sapien faucibus et. Aliquam faucibus purus in massa tempor.
        </div>
        <div class="c mw">
           <img src='https://images.unsplash.com/photo-1580818302076-305ea44b738c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' width=250px height=150px>
        </div>
      </div>
    </div>

$height: 100px;
$width: 100%;
$border: double black;
$pad: 10px;
.content {
  border-top: $border;
  border-bottom: $border;
}
.boxy {
      display:flex;
      max-width: 100%;
    }
.a{
  min-height: $height;
  width: $width;
  padding: $pad;
}
.b{
  min-height: $height;
  width: $width;
  padding: $pad;
}
.c{
  min-height: $height;
  width: $width;
  padding: $pad;
}

@media screen and (max-width: 600px) {
  img{
  width:100%;
  }
  .b{
    display:none;
  }
}