html - Div width/height 100% of the free space inside another div -


#external  {    background-color: #585858;    width: 200px;    height: 200px;  }  #internal  {    background-color: #111858;    width: 50px;    height: 100%;  }
<div id="external">    content 1    <div id="internal"></div>  </div>

in case, how can set remnant height of external div internal div? problem when set 100% height internal div, internal height == external height.

your request little unclear flexbox can think after.

p {    margin: 0;  }  .external {    background-color: rgba(255, 0, 0, 0.5);    width: 200px;    height: 200px;    display: inline-flex;    flex-direction: column;    margin: 10px;  }  .internal {    background-color: #111858;    100%;    flex: 1;  }
<div class="external">    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>    <div class="internal"></div>  </div>  <div class="external">    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nemo harum quia tempore! sit, laboriosam, quam.</p>    <div class="internal"></div>  </div>


Comments

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

html - Missing border-right in select on Firefox -

c# - two queries in same method -