How can TailwindCSS be used to wrap a nested flexbox at a specific viewport?

Utilizing TailwindCSS, I have the following code snippet:

<div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div className="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <!-- When viewed on a specific viewport (e.g. mobile), I want the following section to wrap onto its own line -->
  <div class="grow">
    <div class="flex h-full items-center justify-end">
      <button class="w-32 rounded-full bg-green-100">Start action</button>
    </div>
  </div>
</div>

My goal is to make the "Start action" flexbox area wrap independently when viewed on specific viewports, while maintaining the layout of the icon and title/subtitle sections unchanged. Unfortunately, the flex grow styling seems to be preventing flex wrap from functioning as expected. Any suggestions on how to achieve this? It may be a simple fix that is not immediately apparent to me!

To see an example in action, you can view it in a Tailwind playground here: https://play.tailwindcss.com/l2E7okOqOV

htmlcssflexboxtailwind-css

Answer №1

If you're not satisfied with the solution provided, feel free to give more details about what you need.


<div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div class="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <div class="">
    <div class="flex h-full items-center justify-end">
      <button class="rounded-full flex flex-wrap bg-green-100 px-4">Start action</button>
    </div>
  </div>
</div>

The issue arises from setting a fixed width, preventing wrapping of elements.

To wrap only the last item in the flexbox, consider this approach: this:

<!-- only last item will wrap -->
<div class="box-border flex w-auto flex-row flex-wrap gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="shrink">
    <div class="flex h-full flex-row items-center justify-center">
      <div class="ml-50%">icon</div>
      <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
    </div>
  </div>
  <div class="shrink">
    
  </div>
  <div class="">
    <div class="flex h-full items-center justify-end">
      <button class="rounded-full w-32 bg-green-100 px-4">Start action</button>
    </div>
  </div>
</div>

Consider simplifying the structure by using flex alignment and justification instead of margin-based layouts when working with flex-boxes for better results.

Answer №2

To ensure proper alignment, consider enclosing the icon and title/subtitle in a separate div adjacent to the button section. Utilize the justify-between property within the parent container.

By implementing this structure, a space will be created between the icon/title/subtitle and the button. This arrangement ensures that the former remains on the left while the latter aligns to the right when there is adequate space available. In situations where space is limited, the button portion will transition to the next line for better visibility.

<div class="box-border flex justify-between w-auto flex-wrap gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div>
    <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div className="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  </div>
  <!-- I want the following to wrap onto its own line at a certain viewport -->
  <div>
    <div class="flex h-full items-center justify-end">
      <button class="w-32 rounded-full bg-green-100">Start action</button>
    </div>
  </div>
</div>

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

Guide to making a button in jQuery that triggers a function with arguments

I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...

javascripthtmljquerydatatables

Restricting choices once user selects an option (HTML)

Currently, I am faced with a dilemma regarding two sets of options for an HTML form. One set consists of various units (such as cm, in, ft.), while the other set includes different locations. The selection of a unit would restrict certain location option ...

htmlcssflask

The function TagBuilder.MergeAttributes is malfunctioning

My attempt at creating a custom helper in MVC is not working as expected. The custom attributes are not being added to the HTML: Custom Helper Function public static MvcHtmlString MenuItem(this HtmlHelper helper, string linkText, string actionName, strin ...

c#asp.net-mvchtmltagbuilder

Retrieving the text from the img tag of a bs4.element.Tag

I have a question that needs to be addressed. My concern involves a list of bs4.element.Tags, similar to the one illustrated in the image below. The issue at hand is filtering out only the href tags that are preceded by an <img> tag. How can this s ...

pythonhtmlimagebeautifulsouptags

How can you match the width of a series of elements to the width of an image directly preceding the div?

Looking to ensure that a series of captions have the same width as the images preceding them. This is the HTML code: <div class="theparent"> <img src="pic.jpg"/> <div class="caption"> hello </div> <div> <div ...

javascriptjqueryhtmlcss

Having trouble with the scrolling feature on a read-only text area within a form

My form allows users to input their data, but once submitted, the form becomes read-only. However, I'm facing an issue where the data in the text area is not scrollable even though it should be. I need assistance in figuring out why the content in th ...

jqueryhtmlcssbootstrap-4

Guide to setting a default value for a select option in Angular 2+

I am having trouble setting a default option in my select box using the html selected property. I want the selected option to be assigned to StartingYear, but currently it's not working as expected. <select [(ngModel)]="StartingYear"> < ...

angularhtml

Placement: fresh column in absolute position

Could someone please help me understand this situation? I have posted my code on jsfiddle. I am using Bootstrap 4. In my design, I have text placed over an image with the parent div having position:relative. The left div has position:absolute and left:2%, ...

htmlcsstwitter-bootstrap

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

javascriptjqueryhtmlcanvas

Connecting Node.js Post script to an HTML form: A step-by-step guide

After successfully creating a RESTful API, I tested it using Postman and everything worked as expected. The test is executed from an index.js file where the routes are saved as shown below. const config = require('config'); const mongoose = requi ...

htmlnode.jsdatabasemongodbexpress

The linking process in AngularJS is encountering difficulties when trying to interact with

I've already looked at similar questions, and my code seems correct based on the answers provided. It's a very simple beginner code. <html ng-app=""> <head> <title>Assignment</title> <script src=" ...

javascripthtmlcssnode.jsangularjs

JavaScript document string separation

Hi there, I'm a newbie here and could really use some assistance. I am struggling with creating a function and would appreciate any ideas... To give you an idea of what I need help with, I have a String and I want to check if it contains a specific w ...

javascripthtmlstring

What are some creative ways to customize radio buttons using images?

I am looking to customize the appearance of my radio buttons by using images for both selected and unselected states. Here is the CSS code I have implemented: input[type="radio"] { background: url("https://example.com/path/to/unselec ...

jquerycssradio-button

Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this: body { margin: 0; } div { margin-bottom: 0; } The problem persi ...

htmlcssbootstrap-5

HTMLKit is functioning properly on the simulator but is experiencing difficulties when running on the

Currently, I'm utilizing HTMLKit as a dependency in my project. It runs smoothly on the simulator but encounters issues when running on an actual device. Below is the crash log generated while attempting to run it on an iPhone: dyld: Library not ...

htmliosswiftxcodecocoapods

Please indicate the value of the JQuery class

How can I display the value of the selected button? All buttons have the class "nummer" and their values should appear on the display. Is there a better approach to achieve this? JQUERY $(document).ready(function() { $(".nummer").click(function() { ...

jqueryhtml

Only IE7 seems to be experiencing a z-index problem with CSS that is not present on any

I’ve encountered a perplexing problem with CSS z-index in IE7 that I just can’t seem to solve. #screen { display: none; background-image: url('/images/bg.png'); background-repeat: repeat; position: fixed; top: 0px; le ...

htmlcssinternet-explorerinternet-explorer-7z-index

If a user types in Korean characters in the input field and then clicks away to any other part of the screen, the input field will automatically regain focus

jsfiddle instructions for testing: type Korean characters in the input field scroll down until the input field is no longer visible Click anywhere on the screen Expected result: the input field will come into focus with (Korean text) If the user enters K ...

htmlcss

The navigation menu is stuck and will not toggle

I'm having trouble getting the button to toggle the nav bar to work properly. I've gone through similar questions and checked my html, but still can't figure out the issue. Any help would be greatly appreciated! Although I can see all the l ...

htmlbuttonnavigationbartogglebutton

Enhance your visual content by incorporating text onto images with CSS/Bootstrap5

I'm having trouble getting my rows and columns to display on top of my background image. I've been struggling with this issue for a while now. Any assistance on this matter would be greatly appreciated! I'm fairly new to this, so if it&apos ...

htmlcssbootstrap-5