如何使我的div正确适应动态尺寸

Question

我正在尝试在CSS中进行以下操作：

在这里，我已经完成了工作，但是div sizer2应该像下面的痛苦中那样显示div

https://codepen.io/crocsx-the-styleful/pen/rPGzXm（非常残破的示例）

所以基本上是：

如果右边有足够的空间，则将我的标题和内容一个接一个显示（内联）

如果我的div宽度太小，请在内容上方显示我的标题。

此外，红线必须始终位于底部，并且div不应溢出。

像

我不完全知道该怎么做：

.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;
}

为什么？就我而言，用户案例编辑了字段的布局，我想保持动态，以便如果他想水平/垂直显示该字段，则信息可以正确显示

Answer 1

您可以使用Javascript实现它。根据容器的宽度，确定要评估为.container的类，还是.container或.container2。请注意，在containerDiv.offsetWidth<100+5+5+10行中，100指的是.title的宽度，+5+5指的是padding-left+padding-right，+10指的是垂直滚动框的宽度在右边。当然，您可以根据需要进行调整。

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

您可以使用media queries获得所需的结果。