我来帮你搞定这个需求！你要实现两个关键效果：一是让文本乖乖待在内容div里自动换行，不会溢出；二是保证导航栏（navbar）的尺寸固定，哪怕内容区文本超长，也绝不挤压导航栏的空间。结合你给出的Bootstrap环境，下面是具体实现步骤和代码：

核心思路 #

• 文本自动换行：通过CSS属性强制长文本在div内换行，避免溢出
• 固定导航栏布局：利用flex布局让导航栏宽度/高度固定，内容区自动填充剩余空间，同时内容区设置滚动避免撑大容器

完整代码实现 #

/* 导航栏样式 - 固定宽度和高度 */
.navbar-div {
  width: 200px; /* 固定宽度，可按需调整 */
  height: 200px; /* 和父容器高度保持一致 */
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  padding: 10px;
}

/* 内容区样式 - 文本自动换行+不挤压导航栏 */
.DivDescricao {
  min-height: 150px;
  border: 1px solid #C8C7C7;
  margin: 10px;
  padding: 10px;
  border-left: 10px solid #C8C7C7;
  background: white;
  /* 关键属性：强制文本换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  /* 内容过长时显示滚动条，避免撑大容器 */
  overflow-y: auto;
  /* 占据父容器剩余空间 */
  flex: 1;
}

/* 父容器使用flex布局，确保子元素排列逻辑正确 */
#fases {
  height: 200px;
  display: flex;
  gap: 10px; /* 导航栏和内容区之间的间距 */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="fases" class="col-md-12">
  <!-- 固定尺寸的导航栏div -->
  <div class="navbar-div">
    这里是导航栏内容，尺寸固定不会被挤压
  </div>
  <!-- 自动换行的内容区div -->
  <div class="DivDescricao">
    这里可以放超长文本测试：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

关键属性解释 #

• word-wrap: break-word / overflow-wrap: break-word：配合使用，让超长单词或连续字符自动换行，不会超出div边界
• white-space: normal：确保文本遇到div边界时自动换行，覆盖可能存在的强制不换行设置
• display: flex（父容器）：让导航栏和内容区横向排列，导航栏固定宽度，内容区通过flex:1自动填充剩余空间，彻底避免内容挤压导航栏
• overflow-y: auto：当内容区文本过多时，自动显示垂直滚动条，保持容器尺寸固定，不会撑大父容器

这样设置后，不管内容区文本多长，导航栏的尺寸都会保持固定，文本也会乖乖在内容div内自动换行，不会溢出啦！

内容的提问来源于stack exchange，提问作者Bruno Aparecido da Silva