设置div宽度并在屏幕上不适合绝对定位div

Question

我正在尝试将固定宽度设置为div，例如200px。我希望div总是有200px，除非当前窗口没有足够的空间。

div {
  border: 2px solid;
}
.fixedWidth {
  width: 200px;
  position: absolute;
}
.noWidth {
  position: absolute;
}

<div class="fixedWidth">
  lalala lala lalala lalala
</div>
<br />
<br />
<div class="noWidth">
  alala lala alal lala
</div>

当屏幕变小时，可以看到以下问题：

第一个div没有调整大小，文字也不在屏幕之外。

我注意到，我试图实现的行为基本上是普通div的最大宽度，但这对绝对定位的div不起作用。

由于普通div可以在没有媒体查询的情况下执行此操作，我正在搜索没有媒体查询的解决方案，但我不确定这是否可行。

Answer 1

.fixedWidth {
  max-width: 100%;
  position: absolute;
  width: 200px;
}

只需添加max-width:100%

Answer 2

您应该能够执行以下操作：

.fixedWidth {
    max-width:200px; 
    width: 100%;
 }

这意味着在屏幕不够大之前它是200px

Answer 3

如果你想让宽度内容跟随当前内容的宽度，你应该制作宽度为100％的类样式 不好的英语 你选择什么样的职位并不重要

Answer 4

尝试将此类放入固定宽度元素。

#wrapper {
   max-width: 200px;
}

Answer 5

你需要在div中添加另一个具有绝对位置的相对位置的div。

＆＃13;

＆＃13;

div {
  border: 2px solid;
}
.fixedWidth {
  position: absolute;
}
.sizefit{
  position:relative;
  max-width:200px;
  width:100%;
}
.noWidth {
  position: absolute;
}

＆＃13;

<div class="fixedWidth">
<div class="sizefit">
 lalala lala lalala lalala
</div>
 
</div>
<br />
<br />
<div class="noWidth">
  alala lala alal lala
</div>

＆＃13;

＆＃13;

＆＃13;