How to make my div adapt to dynamic size correctly

Question

I am trying to make the following in css :

here you have what I already made, but, the div sizer2 should display the div like in the pain below

https://codepen.io/crocsx-the-styleful/pen/rPGzXm (very broken exemple)

so basically :

If there is enough space on the right, then, display my title and content one after the other (inline)

If my div width is to small, then display my title over the content.

Also, the red line must be always at the bottom, and the div should not overflow.

like this

I do not exactly know how to do this :

.container{
  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
  border-bottom: red 1px solid;
  display: inline-flex;
}

.title{
  word-break: break-all;
  white-space: normal;
  width: 100px;
  min-width: 100px;
  height: auto;
  word-break: break-all;
  white-space: normal;
}

.content{
  word-break: break-all;
  white-space: normal;
  margin-inline-start: 0px;
  overflow: auto;
}

Why ? in my case, the user case edit the layout of a field, and I would like to be dynamic so that if he want to horizontally/vertically display the field the information is shown correctly

Answer 1

You can use Javascript to achieve it. Deciding which class to be assessed to .container , either still .container or .container2 by the width of the container. Notice in line containerDiv.offsetWidth<100+5+5+10 , 100 referring to your .title width, +5+5 refering to your padding-left+padding-right , +10 refering to the width of vertical scrollbox in the right side. Of course you can play with it to adjust to your needs.

 var containers = document.querySelectorAll('.container') containers.forEach(function(containerDiv){ console.log(containerDiv.offsetWidth) if(containerDiv.offsetWidth<100+5+5+10){ containerDiv.classList.remove('container'); containerDiv.classList.add('container2') } }) 

 .sizer{ width:500px; height:100px; background-color:grey; position: relative; padding: 5px; } .sizer2{ width:119px; height:500px; background-color:grey; position: relative; padding: 5px; left:600px; position:absolute; top:10px; } .container{ position: relative; width:100%; height:100%; overflow: hidden; border-bottom: red 1px solid; display: flex; /* flex-wrap: wrap; */ overflow: auto; box-sizing: border-box; } .container2{ position: relative; width:100%; height:100%; overflow: hidden; border-bottom: red 1px solid; display: flex; flex-wrap: wrap; overflow: auto; box-sizing: border-box; } .title{ word-break: break-all; white-space: normal; width: 100px; min-width: 100px; height: auto; } .content{ /* word-break: break-all; */ white-space: normal; margin-inline-start: 0px; /* overflow: auto; */ } 

 <div class="sizer"> <div class="container"> <div class="title">TiletilTiletilTiletilTiletil</div> <div class="content">Nullam porttitor lacus at turpis. Donec posuere metus vitae ipsum. Aliquam non mauris. Morbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis. Fusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.</div> </div> </div> <div class="sizer2"> <div class="container"> <div class="title">TiletilTiletilTiletilTiletil</div> <div class="content">Sizer2Nullam porttitor lacus at turpis. Donec posuere metus vitae ipsum. Aliquam non mauris. Morbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis. Fusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.</div> </div> </div> 

Answer 2

您可以使用媒体查询来获得所需的结果。