html - 宽度自动和滚动条导致换行

Question

社区，

目前我正在为一个恼人的问题而苦苦挣扎。在我们的网站上，我们有一个日历，其中日期根据当天发生的事件以不同的颜色显示。有一个图例来告诉哪个颜色是哪个事件。

为了让移动用户的体验更好，我实现了一个 float 按钮，通过它可以切换图例的叠加层。这也没有问题，只有一件事让我烦恼。

容器的宽度设置为自动，这样当添加新的、较长的事件文本时，不必手动编辑宽度。在 Firefox 和 Safari 中，最长的文本将在彩色 div 下方中断，一旦需要显示滚动条，由于溢出..

Firefox v65.0

在 Chrome 中，甚至在 IE/Edge 中，它都可以正常工作，滚动条被考虑在内，width: auto 使 div 尽可能宽。

Chrome v72.0

这是浏览器问题，还是可以在不手动设置宽度的情况下以某种方式修复它？

重新创建它的代码:

#container {
  width: auto;
  max-height: 75vh;
  background: rgba(0, 0, 0, 0.2);
  overflow: auto;
  float: right;
  position: fixed;
  bottom: 15px;
  right: calc(30px + 10vw);
  max-width: 100%;
}

.wrapper {
  margin: 5px;
  overflow: hidden;
}

.second {
  float: left;
  margin: 5px;
}

.legende {
  width: 30px;
  height: 30px;
  margin: 3px;
  background: #3388aa;
  float: left;
}

<div id="container">
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Some Text
    </div>
  </div>
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Some longer Text
    </div>
  </div>
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Some more Text
    </div>
  </div>
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Another Text
    </div>
  </div>
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Some Text
    </div>
  </div>
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Some longer Text
    </div>
  </div>
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Some more Text
    </div>
  </div>
  <div class="wrapper">
    <div class="legende">

    </div>
    <div class="second">
      Another Text
    </div>
  </div>
</div>

Answer 1

再试一次!我添加了一个 .inner div 以将固定位置分开。

#container {
	position: fixed;
	bottom: 15px;
	right: calc(30px + 10vw);
}

.inner {
	width: 120%;
  max-height: 75vh;
  overflow-y: auto;
	overflow-x: hidden;
	background: rgba(0, 0, 0, 0.2);
}

.wrapper {
	margin: 5px;
	overflow: hidden;
}

.second {
	float: left;
	margin: 5px;
}

.legende {
	width: 30px;
	height: 30px;
	margin: 3px;
	background: #3388aa;
	float: left;
}

<div id="container">
	<div class="inner">
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Some Text
			</div>
		</div>
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Some longer Text
			</div>
		</div>
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Some more Text
			</div>
		</div>
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Another Text
			</div>
		</div>
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Some Text
			</div>
		</div>
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Some longer Text
			</div>
		</div>
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Some more Text
			</div>
		</div>
		<div class="wrapper">
			<div class="legende">

			</div>
			<div class="second">
				Another Text
			</div>
		</div>
	</div>
</div>