css - 页面大小调整问题。子 div 不像父 div 那样调整大小

Question

我现在正在努力解决调整大小的问题。在我的页面中，我有一个主 div，在那个 div 里面我有几个 div。主 div 现在可以重新调整大小，但是当我调整页面大小时，子 div 内容从主 div 的一侧消失了。没有滚动条我怎么能解决这个问题

 .contentcolumn {
    border-width: 1px;
    border-style: solid;
    margin-left:108px;
    margin-right:48px;
    height: calc(100% - (150px + 50PX));
   
}
        body,html{
            
   
    height: 100%;
        }
       

<div class="contentcolumn">
  <div>hai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    
    <div>hai</div>
    

Answer 1

在您的元素中添加分词

http://www.w3schools.com/cssref/css3_pr_word-break.asp

.contentcolumn {
        border-width: 1px;
        border-style: solid;
        margin-left:108px;
        margin-right:48px;
        height: calc(100% - (150px + 50PX));
       word-break: break-all;
    }

<div class="contentcolumn">
  <div>hai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    
    <div>hai</div>
    
</div>