Show flexibility in the grandchildren of a row layout

My goal is to achieve a layout similar to the image below using the flex "system", but I am facing a challenge with some generated directives that are inserted between my layout div and the flex containers:

https://i.sstatic.net/nq4Ve.png

<div id="i-can-control-this-div" layout="row" layout-wrap>
  <div id="uncontrolled-div-generated-by-vendor-directive">
    <div id="another-generated-div">
      <div id="maybe-the-last-one">
        <div id="uncontrollable-div-arround-each-flex">
          <div flex="66">[flex=66]</div>
        </div>
        <div id="uncontrollable-div-arround-each-flex">
          <div flex="33">
            <div style="height:100px">[flex=33]</div>
          </div>
        </div>
        <div id="uncontrollable-div-arround-each-flex">
          <div flex="66">[flex=66]</div>
        </div>
        <div id="uncontrollable-div-arround-each-flex">
          <div flex="33">[flex=33]</div>
        </div>
        <div id="uncontrollable-div-arround-each-flex">
          <div flex="33">[flex=33]</div>
        </div>
        <div id="uncontrollable-div-arround-each-flex">
          <div flex="33">[flex=33]</div>
        </div>
        <div id="uncontrollable-div-arround-each-flex">
          <div flex="33">[flex=33]</div>
        </div>
      </div>
    </div>
  </div>
</div>

The layout created looks similar to the first section in this CodePen. One potential solution could be to use JQuery to manipulate the styles of these divs, but I am curious if there is a cleaner approach available?

Answer №1

To ensure that your content fills the available width, make use of the flex attribute.

<div id="i-can-control-this-div">
<div id="uncontrolled-div-generated-by-vendor-directive">
  <div id="another-generated-div">
    <div layout="row" flex layout-wrap id="maybe-the-last-one">
      <div flex="66" id="uncontrollable-div-arround-each-fl">
        <div>[flex=66]</div>
      </div>
      <div id="uncontrollable-div-arround-each-flex" flex="33">
        <div>
          <div style="height:100px">[flex=33]</div>
        </div>
      </div>
      <div flex="33" id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
       <div flex="66" id="uncontrollable-div-arround-each-flex">
        <div>[flex=66]</div>
      </div>
      <div flex="33" id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
      <div flex="33" id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
      <div flex="33"id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
    </div>
  </div>
</div>

Try this out: http://codepen.io/next1/pen/xVyPGw

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing mobile page layouts with CSS

I'm putting in a lot of effort to ensure that my simple form page is optimized for mobile devices. Although the form is visible, I find myself having to zoom in quite a bit in order to read it. Here's an example: ...

What is the process to activate/deactivate a drop-down menu once a radio button has been chosen

JSON Data: radio1Data: any[] = [ { value: 'col-1', viewValue: 'Col-1' }, { value: 'col-2', viewValue: 'Col-2' } ]; radio2Data: any[] = [ { value: 'col-1', viewValue: 'Col-1' }, ...

Error encountered while validating jQuery word cloud

Can anyone please assist me with validating a jQuery word cloud in HTML5? I'm encountering issues with all of the rel values showing this error message: "Bad value 1 for attribute rel on element a: Not an absolute IRI. The string 1 is not a registere ...

What is the best way to apply styling exclusively to a child component?

I am currently working on a coding project that involves a parent component and multiple child components. My main goal is to adjust the position of a filter icon by moving it down 5 pixels on one specific child component. The issue I am facing is that no ...

Why won't my AngularJS Google Maps marker trigger any events?

My issue is with the marker event not working on a UI Google Map. I am using this link. Here is my view setup: <ui-gmap-markers models="mapResult" fit="true" idkey="mapResult.id" coords="'form_geo'" click="'onclick'" events="mapRe ...

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...

Issues with HTML rendering text

Having trouble with text display on my website. It seems to vary based on screen resolution, but I can't figure out why. Any insights on what might be causing this issue? Check out the source code here <body> <div id="navwrap"> < ...

Error in AngularJS and TypeScript: Property 'module' is undefined and cannot be read

I'm attempting to incorporate TypeScript into my AngularJS 1.x application. Currently, my application utilizes Webpack as a module loader. I configured it to handle the TypeScript compilation by renaming all *.js source files to *.ts, and managed to ...

What is the best way to arrange the elements vertically within a flex container?

In my current code snippet, I have the following setup: <section class="body1"> <h1 class="text1">Tours around the world</h1> <h3 class="text1">Great experiences</h3> <form action="/respuestaUsuario/"> ...

Instructions on utilizing clean-css with Node.js to process incoming requests

I need help finding a way to pipe request output into clean-css for minification and then return it as a response. The application I am working on is using restify framework. Here is an example of what I'm trying to accomplish: var url = "http://www ...

Customize CSS for Vimeo's HTML5 player

Can I customize Vimeo's HTML and CSS attributes? I have a video that autoplays and I don't want the play button. I want to modify this specific class. .a.l .b .as { position: absolute; top: 50%; left: 50%; margin: -2em 0 0 -3.25em; float: none; ...

Using AngularJS to configure validation based on a custom boolean flag

Is it possible to set the validity of a form element based on a custom boolean value? Let's consider the password fields below: <input type="password" name="password" ng-model="user.password" required> <input type="password" name="passwordRe ...

Encountering an error in Angular UI Bootstrap Modal: [$injector:unpr] $uibModalInstanceProvider is not recognized as

I've been encountering a strange issue. Despite searching online and finding numerous Google results and solutions on Stack Overflow, nothing seems to be resolving my problem! My current challenge involves implementing AngularUI Bootstrap Modal. Howe ...

Is it possible to generate an HTML element by utilizing an array of coordinates?

I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...

The content is not adapting properly for mobile devices (Bootstrap)

Currently, I am in the midst of a project and require assistance in ensuring an element on my webpage is responsive. Specifically, I need the text within a box to overlap the accompanying image when the browser window is resized. Should I add a class to th ...

Tips for employing CSS hover within HTML elements?

Is there a way to achieve the following: <li style="hover:background-color:#006db9;"> I have tried this approach but it doesn't seem to work. Is there an alternative method, or do I need to include the CSS in the head section or an external CS ...

Tips for enhancing the transition effect of animated gifs on a webpage using JavaScript

In my code, I have an interval set to run every seven seconds. Within this interval, there are two gifs that each last for seven seconds. My goal is to display one of the gifs in a div (referred to as "face") based on certain conditions - for example, if t ...

The CSS list formatting does not seem to be compatible with Bootstrap 4

For my website, I am working on creating a table using the list method along with CSS. However, I encountered a problem where the table is not displaying correctly when Bootstrap CDN is applied. Removing Bootstrap CDN resolves the issue, but I need to keep ...

Explore the functions of jQuery's .css() method and the implementation of

Could use some assistance with the .css() method in jQuery. Currently working on a mouseover css menu, and encountering an issue when trying to include this code: $(this).siblings().css({backgroundColor:"#eee"}); at the end of my script. It seems to int ...

Aligning the icon within the div and adding a gap between each div

I'm fairly new to web design, specifically dealing with html and css, and I'm attempting to create something similar to the design in the following image: https://i.sstatic.net/Dy5F3.png My struggle lies in centering the fa-envelope-o icon both ...