Cause an element to extend beyond others when the viewport reaches its limit

Question

Cause an element to extend beyond others when the viewport reaches its limit

My design dilemma involves two squares: a blue one that will expand to contain things totaling 800px, and a red one that must always remain fully visible. When narrowing the viewport, the red square should overlap the blue square, rather than disappearing off the screen.

How can I make this happen?

.container {
  display: flex;
}

div {
  height: 80px;
}

.should-be-overlapped {
  width: 100%;
  min-width: 800px;
  background: blue;
}

.always-full-width {
  width: 400px;
  background: red;
}

<div class="container">
  <div class="should-be-overlapped"></div>
  <div class="always-full-width"></div>
</div>

html css flexbox

Answer 1

Answer №1

To achieve this, there are primarily two approaches.

You can either enclose the blue section in a wrapper (which I would recommend).

Check out the updated codepen

View the stack snippet below:

.container {
  position: relative;
  display: flex;
}

div {
  height: 80px;
}

.wrapper {
   flex: 1;
   overflow: hidden;
}

.should-be-overlapped {
   width: 100%;
   min-width: 800px;
   background: blue;
}

.always-full-width {
  flex: 0 0 400px;
  background: red;  
}

<div class="container">
  <div class="wrapper">
    <div class="should-be-overlapped">
    </div>
  </div>
  <div class="always-full-width">
  </div>
</div>

Alternatively, you can utilize position: absolute.

Check out the updated codepen

.container {
  display: flex;
  position: relative;
  overflow: hidden;
}

div {
  height: 80px;
}

.should-be-overlapped {
   width: 100%;
   min-width: 800px;
   background: blue;
}

.always-full-width {
  position: absolute;
  right: 0;
  width: 400px;
  background: red;  
}

.<div class="container">
  <div class="should-be-overlapped">
  </div>
  <div class="always-full-width">
  </div>
</div>

Answer 2

To achieve this, there are primarily two approaches.

You can either enclose the blue section in a wrapper (which I would recommend).

Check out the updated codepen

View the stack snippet below:

.container {
  position: relative;
  display: flex;
}

div {
  height: 80px;
}

.wrapper {
   flex: 1;
   overflow: hidden;
}

.should-be-overlapped {
   width: 100%;
   min-width: 800px;
   background: blue;
}

.always-full-width {
  flex: 0 0 400px;
  background: red;  
}

<div class="container">
  <div class="wrapper">
    <div class="should-be-overlapped">
    </div>
  </div>
  <div class="always-full-width">
  </div>
</div>

Alternatively, you can utilize position: absolute.

Check out the updated codepen

.container {
  display: flex;
  position: relative;
  overflow: hidden;
}

div {
  height: 80px;
}

.should-be-overlapped {
   width: 100%;
   min-width: 800px;
   background: blue;
}

.always-full-width {
  position: absolute;
  right: 0;
  width: 400px;
  background: red;  
}

.<div class="container">
  <div class="should-be-overlapped">
  </div>
  <div class="always-full-width">
  </div>
</div>

Answer 3

Answer №2

The blue square I have is designed to hold items totaling 800px.

If you want it to be able to shrink, use flex: 0 1 800px:

.container {
  display: flex;
}

div {
  height: 80px;
}

.should-be-overlapped {
  /*min-width: 800px;*/
  flex: 0 1 800px; /* doesn't grow but shrinks, initial width set to 800px (this is also its "max-width") */
  background: blue;
  word-break: break-all; /* for longer unbreakable strings, just for demo */
}

.always-full-width {
  /*width: 400px;*/
  flex: 0 0 400px; /* since you're using flexbox, doesn't grow nor shrink, initial width set to 400px (fixed) */
  background: red;
}

<div class="container">
  <div class="should-be-overlapped">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="always-full-width"></div>
</div>

Answer 4

The blue square I have is designed to hold items totaling 800px.

If you want it to be able to shrink, use flex: 0 1 800px:

.container {
  display: flex;
}

div {
  height: 80px;
}

.should-be-overlapped {
  /*min-width: 800px;*/
  flex: 0 1 800px; /* doesn't grow but shrinks, initial width set to 800px (this is also its "max-width") */
  background: blue;
  word-break: break-all; /* for longer unbreakable strings, just for demo */
}

.always-full-width {
  /*width: 400px;*/
  flex: 0 0 400px; /* since you're using flexbox, doesn't grow nor shrink, initial width set to 400px (fixed) */
  background: red;
}

<div class="container">
  <div class="should-be-overlapped">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="always-full-width"></div>
</div>

Cause an element to extend beyond others when the viewport reaches its limit

Answer №1

Answer №2

Similar questions

What is the best way to limit the top margin for a fixed element?

What are some methods for displaying images retrieved from an API onto an HTML webpage?

Can anyone help me with fixing the error message 'Cannot assign to read-only property 'exports' of the object' in React?

Struggling to have PHP process and store form data in MySQL database

Why isn't my li:hover responding the way it should?

Show only half of the Google Charts

What is the best way to resize a Drawable to fit the width of a TextView?

What could be the reason for my application not utilizing its bootstrap classes effectively?

What is the best way to choose a single li element?

Prevent touching the pseudo content of an element

Issue with Flex property not being supported in Safari browser

"After completing the survey form, the User Details form is displayed upon clicking the submit button

Assign a unique HTML attribute to a child element within a Material-UI component

Anchor tags are not visible to Jquery

Overflow of content within a rectangular element

Using a twig loop to display just a single table cell

Is it possible to activate the identical drop-down or popover with multiple buttons?

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

The background color is failing to respond to the padding of the adjacent image

Retrieving the CSS property values for a specific element using Selenium