Width auto and scrollbar causing linebreak

Issue

Community,

at the moment I struggle with an annoying problem. On our website we have a calendar where dates are differently colored depending on what event is on that day. There's a legend to tell which color is which event.

To make things better for mobile users I implemented a floating button with which an overlay for the legend can be toggled. This also works without problems, there's just this one thing that's bugging me.

The width of the container is set to auto, so that when new, longer texts for events are added the width doesn't have to be edited manually. In Firefox and Safari the longest text(s) will break below the colored div, as soon as the scrollbar is necessary to show up, due to overflow..

Firefox v65.0

In Chrome and even in IE/Edge it works correctly, the scrollbar is taken into account and width: auto makes the div as wide as necessary.

Chrome v72.0

Is this a browser problem, or is it somehow possible to fix it without manually setting a width ?

The Code to recreate it:

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

Solution

One more try! I added an .inner div to keep the fixed position separate.

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

Answered By - tom