Question

社区

此刻，我遇到了一个令人烦恼的问题。在我们的网站上，我们有一个日历，其中的日期根据当天的活动而有不同的颜色。有一个传说来告诉哪种颜色是哪个事件。

为了使移动用户更好，我实现了一个浮动按钮，可以通过该按钮切换图例的叠加层。这也没有问题，只有一件事困扰着我。

容器的宽度设置为 auto ，因此，在添加新的，较长的事件文本时，不必手动编辑宽度。在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

使用flexbox而不是float：

#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 {
  display: flex;
  margin: 5px;
  overflow: hidden;
}

.second {
  margin: 5px;
}

.legende {
  width: 30px;
  height: 30px;
  margin: 3px;
  background: #3388aa;
}

<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 2

即使我在Mac上的firefox 65.0.1和Safari上都没有看到此问题，也可以通过将white-space: nowrap;添加到.wapper元素来禁用元素包装。

.wrapper {
  margin: 5px;
  overflow: hidden;
  white-space: nowrap;
}

Answer 3

再尝试一次！我添加了一个.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>

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

3 个答案: