Styjun

How should I push back against my job assigning "homework"?

Is it possible to kill all life on Earth?

Imperfective Aspect in German in "not since" constructions

Is there a way to save this session?

Humans meet a distant alien species. How do they standardize? - Units of Measure

Applicants clearly not having the skills they advertise

Can those paralyzed by the Hold Person spell be forcibly moved?

Are there practical reasons to NOT use a stepper motor with lead screw for the X and or Y axes?

How can I grammatically understand "Wir über uns"?

Accidentally cashed a check twice

Creating Fictional Slavic Place Names

Rotated Position of Integers

Will dual-learning in a glider make my GA learning safer?

How do I get a cleat that's stuck in a pedal, detached from the shoe, out?

Is it a problem that pull requests are approved without any comments

Can I ask a publisher for a paper that I need for reviewing

California: "For quality assurance, this phone call is being recorded"

What if you don't bring your credit card or debit for incidentals?

Topological spaces which are not pseudometrizable.

Filling region bounded by multiple paths

Why were the Night's Watch required to be celibate?

Why is there a need to modify system call tables in Linux?

Why is Colorado so different politically from nearby states?

How can a single Member of the House block a Congressional bill?

Dynamically changing div alignment inside a flexbox

How to horizontally center a <div>?How to align checkboxes and their labels consistently cross-browsersHow to make div not larger than its contents?Vertically align text next to an image?How to align content of a div to the bottom?How to make a div 100% height of the browser window?Change an HTML5 input's placeholder color with CSSClick through div to underlying elementsHow to vertically align an image inside a div?In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I have a <ul> element as flex container with row direction. Each <li> element has a menu contained inside a div, that opens up towards the right when some event occurs.

The problem, is that from some <li> onwards, the menu flows outside the right side of the flex container boundaries.

What I want, is that the menu will know when to stretch rightward from its parent <li>, and when to stretch leftward, depending on whether enough space is still available on the right or not.

This is a skeleton of the problem scope:

<ul style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;">
 <li ng-repeat="items-in-some-source">
 <div>
 <!-- some stuff -->
 <div>
 <!-- some other stuff -->
 </div>
 <div style="position:relative;" ng-include="some-menu-template.html"></div>
 </div>
 </li>
</ul>

This is the expected result, with menu closed on the top row, and some examples with an open menu on the following rows. Note how the <li id=D> element behaves, and also note that the number of <li> elements is dynamic:

This is what happens now, notice how <li id=D> overflows the flex container:

So, is there any way to achieve this using just css? I prefer not to use a Javascript solution for this.

css flexbox

share|improve this question

edited Mar 24 at 11:56

Dondey

asked Mar 24 at 10:10

DondeyDondey

11410

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you add a snippet / fiddle too?
  
  – kukkuz
  Mar 24 at 12:21
  

  
  
  
  

add a comment | 

2

I have a <ul> element as flex container with row direction. Each <li> element has a menu contained inside a div, that opens up towards the right when some event occurs.

The problem, is that from some <li> onwards, the menu flows outside the right side of the flex container boundaries.

What I want, is that the menu will know when to stretch rightward from its parent <li>, and when to stretch leftward, depending on whether enough space is still available on the right or not.

This is a skeleton of the problem scope:

<ul style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;">
 <li ng-repeat="items-in-some-source">
 <div>
 <!-- some stuff -->
 <div>
 <!-- some other stuff -->
 </div>
 <div style="position:relative;" ng-include="some-menu-template.html"></div>
 </div>
 </li>
</ul>

This is the expected result, with menu closed on the top row, and some examples with an open menu on the following rows. Note how the <li id=D> element behaves, and also note that the number of <li> elements is dynamic:

This is what happens now, notice how <li id=D> overflows the flex container:

So, is there any way to achieve this using just css? I prefer not to use a Javascript solution for this.

css flexbox

share|improve this question

edited Mar 24 at 11:56

Dondey

asked Mar 24 at 10:10

DondeyDondey

11410

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you add a snippet / fiddle too?
  
  – kukkuz
  Mar 24 at 12:21
  

  
  
  
  

add a comment | 

I have a <ul> element as flex container with row direction. Each <li> element has a menu contained inside a div, that opens up towards the right when some event occurs.

The problem, is that from some <li> onwards, the menu flows outside the right side of the flex container boundaries.

What I want, is that the menu will know when to stretch rightward from its parent <li>, and when to stretch leftward, depending on whether enough space is still available on the right or not.

This is a skeleton of the problem scope:

<ul style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;">
 <li ng-repeat="items-in-some-source">
 <div>
 <!-- some stuff -->
 <div>
 <!-- some other stuff -->
 </div>
 <div style="position:relative;" ng-include="some-menu-template.html"></div>
 </div>
 </li>
</ul>

This is the expected result, with menu closed on the top row, and some examples with an open menu on the following rows. Note how the <li id=D> element behaves, and also note that the number of <li> elements is dynamic:

This is what happens now, notice how <li id=D> overflows the flex container:

So, is there any way to achieve this using just css? I prefer not to use a Javascript solution for this.

css flexbox

share|improve this question

edited Mar 24 at 11:56

Dondey

asked Mar 24 at 10:10

DondeyDondey

11410

<ul style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;">
 <li ng-repeat="items-in-some-source">
 <div>
 <!-- some stuff -->
 <div>
 <!-- some other stuff -->
 </div>
 <div style="position:relative;" ng-include="some-menu-template.html"></div>
 </div>
 </li>
</ul>

share|improve this question

edited Mar 24 at 11:56

Dondey

asked Mar 24 at 10:10

DondeyDondey

11410

share|improve this question

edited Mar 24 at 11:56

Dondey

asked Mar 24 at 10:10

DondeyDondey

11410

asked Mar 24 at 10:10

DondeyDondey

11410

asked Mar 24 at 10:10

DondeyDondey

11410